箭头函数在 React 类组件中不起作用

Question

我在下面有以下代码，它显示数组中的记录并且工作正常。 现在我想添加搜索数据的能力

并且我添加了以下脚本来启用搜索

filterRecord = record =>
    record.name.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) >
      -1 ||
    record.Age.indexOf(this.state.searchdata) > -1 ||
    record.gender.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) >
      -1;

我也试过

filterRecord = (record) => (record.name.indexOf(this.state.searchdata) > -1 || 
                           record.Age.indexOf(this.state.searchdata) > -1 || 
                           record.gender.indexOf(this.state.searchdata) > -1);

这两个代码都给出了错误 unexpected token pointing at equal to (=) at this line filterRecord =

这是截图

这是完整的代码

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.filterRecord = this.filterRecord.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      rec: [
        { name: "Tony", Age: "18", gender: "male" },
        { name: "John", Age: "21", gender: "female" },
        { name: "Luke", Age: "78", gender: "male" },
        { name: "Mark", Age: "90", gender: "female" },
        { name: "Jame", Age: "87", gender: "female" },
        { name: "Franco", Age: "34", gender: "male" },
        { name: "Franco", Age: "34", gender: "male" },
        { name: "Biggard", Age: "19", gender: "male" },
        { name: "tom", Age: "89", gender: "female" }
      ],
      value: "",
      searchdata: ""
    };
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
  filterRecord = record =>
    record.name.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) >
      -1 ||
    record.Age.indexOf(this.state.searchdata) > -1 ||
    record.gender.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) >
      -1;

  render() {
    return (
      <div>
        <div>
          <h3>Search/Filter Records by name, Age and gender</h3>

          <input
            type="text"
            placeholder="Search by name, Age and gender"
            id="searchdata"
            name="searchdata"
            type="text"
            value={this.state.searchdata}
            onChange={this.handleChange}
          />
          <ul>
            {this.state.rec.filter(this.filterRecord).map((obj, i) => (
              <li key={i}>
                {obj.name} - {obj.Age} - {obj.gender}
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

Answer 1

它在我的屏幕上工作正常

Answer 2

它运作良好。

我认为你没有安装 babel 和 es6/es2015。

 class App extends React.Component { constructor(props) { super(props); this.filterRecord = this.filterRecord.bind(this); this.handleChange = this.handleChange.bind(this); this.state = { rec: [ { name: "Tony", Age: "18", gender: "male" }, { name: "John", Age: "21", gender: "female" }, { name: "Luke", Age: "78", gender: "male" }, { name: "Mark", Age: "90", gender: "female" }, { name: "Jame", Age: "87", gender: "female" }, { name: "Franco", Age: "34", gender: "male" }, { name: "Franco", Age: "34", gender: "male" }, { name: "Biggard", Age: "19", gender: "male" }, { name: "tom", Age: "89", gender: "female" } ], value: "", searchdata: "" }; } handleChange(event) { this.setState({ [event.target.name]: event.target.value }); } filterRecord = record => (record.name.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) > -1 || record.Age.indexOf(this.state.searchdata) > -1 || record.gender.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) > -1); render() { return ( <div> <div> <h3>Search/Filter Records by name, Age and gender</h3> <input type="text" placeholder="Search by name, Age and gender" id="searchdata" name="searchdata" type="text" value={this.state.searchdata} onChange={this.handleChange} /> <ul> {this.state.rec.filter(this.filterRecord).map((obj, i) => ( <li key={i}> {obj.name} - {obj.Age} - {obj.gender} </li> ))} </ul> </div> </div> ); } } ReactDOM.render( < App / >, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 3

我在这里可能很傻，但我认为你的箭头函数语法是错误的。 您没有将函数体包裹在花括号中。 试试这个：

filterRecord = (record) => {
   return (record.name.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) > -1 ||
           record.Age.indexOf(this.state.searchdata) > -1 ||
           record.gender.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) > -1);
}

希望这可以帮助！！