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

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 {

  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 2

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

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

}

希望这可以帮助！！