[英]Arrow function not working in react class component
I have the following code below which displays records from an array and is working fine.我在下面有以下代码,它显示数组中的记录并且工作正常。 now I want to add ability to search data现在我想添加搜索数据的能力
and I have added the following script to enable the search并且我添加了以下脚本来启用搜索
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;
I have also tried我也试过
filterRecord = (record) => (record.name.indexOf(this.state.searchdata) > -1 ||
record.Age.indexOf(this.state.searchdata) > -1 ||
record.gender.indexOf(this.state.searchdata) > -1);
both code give error unexpected token pointing at equal to (=)
at this line filterRecord =
这两个代码都给出了错误 unexpected token pointing at equal to (=)
at this line filterRecord =
Here is the full code这是完整的代码
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>
);
}
}
它在我的屏幕上工作正常
It works well.它运作良好。
I think you didn't install babel and es6/es2015.我认为你没有安装 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>
I might be silly here but i think your syntax for arrow function is wrong.我在这里可能很傻,但我认为你的箭头函数语法是错误的。 You didnt wrap your function body in curly braces.您没有将函数体包裹在花括号中。 Try this:试试这个:
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);
}
Hope this helps!!希望这可以帮助!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.