箭头功能在反应类组件中不起作用

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);

两个代码都给出错误意外标记指向等于 (=)在这一行 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>

 </li>

   

  }

}

Answer 1

它运作良好。我认为你没有安装 babel 和 es6/es2015。class App extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.filterRecord = this.filterRecord.bind(this);&nbsp; &nbsp; this.handleChange = this.handleChange.bind(this);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; rec: [&nbsp; &nbsp; &nbsp; &nbsp; { name: "Tony", Age: "18", gender: "male" },&nbsp; &nbsp; &nbsp; &nbsp; { name: "John", Age: "21", gender: "female" },&nbsp; &nbsp; &nbsp; &nbsp; { name: "Luke", Age: "78", gender: "male" },&nbsp; &nbsp; &nbsp; &nbsp; { name: "Mark", Age: "90", gender: "female" },&nbsp; &nbsp; &nbsp; &nbsp; { name: "Jame", Age: "87", gender: "female" },&nbsp; &nbsp; &nbsp; &nbsp; { name: "Franco", Age: "34", gender: "male" },&nbsp; &nbsp; &nbsp; &nbsp; { name: "Franco", Age: "34", gender: "male" },&nbsp; &nbsp; &nbsp; &nbsp; { name: "Biggard", Age: "19", gender: "male" },&nbsp; &nbsp; &nbsp; &nbsp; { name: "tom", Age: "89", gender: "female" }&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; value: "",&nbsp; &nbsp; &nbsp; searchdata: ""&nbsp; &nbsp; };&nbsp; }&nbsp; handleChange(event) {&nbsp; &nbsp; this.setState({ [event.target.name]: event.target.value });&nbsp; }&nbsp;&nbsp;&nbsp; filterRecord = record =>&nbsp; &nbsp; (record.name.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) >&nbsp; &nbsp; &nbsp; -1 ||&nbsp; &nbsp; record.Age.indexOf(this.state.searchdata) > -1 ||&nbsp; &nbsp; record.gender.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) >&nbsp; &nbsp; &nbsp; -1);&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Search/Filter Records by name, Age and gender</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Search by name, Age and gender"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="searchdata"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="searchdata"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.searchdata}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.handleChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.rec.filter(this.filterRecord).map((obj, i) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li key={i}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {obj.name} - {obj.Age} - {obj.gender}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}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 2

我在这里可能很傻，但我认为您的箭头函数语法是错误的。您没有将函数体包裹在花括号中。试试这个：filterRecord = (record) => {&nbsp; &nbsp;return (record.name.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) > -1 ||&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;record.Age.indexOf(this.state.searchdata) > -1 ||&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;record.gender.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) > -1);}希望这可以帮助！！