箭头函数在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);

两个代码都在此行(=)

上给出了指向等于 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

效果很好。

我认为您没有安装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);
}

希望这会有所帮助！