函数的输入从哪里来
where does input to function come from
我们有以下反应html。在回调函数 filterList() 中,我们有一个参数 'input' filterList(input)。这个对象来自哪里?这是来自 onClick 事件吗?还有哪些对象可用?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Filtered List</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id='container'></div>
<script type="text/jsx">
class FilteredList extends React.Component {
constructor(props) {
super(props);
var allItems = [ "anteater", "bear", "cat", "dog", "elephant", "fox" ];
this.state = { initialItems: allItems, currentItems: allItems };
}
filterList(input){
var updatedList = this.state.initialItems;
updatedList = updatedList.filter(function(item){
return item.search(input.target.value) !== -1;
});
this.setState({currentItems: updatedList});
}
render(){
console.log(this);
return (
<div className="filter-list">
<input type="text" placeholder="Filter" onChange={this.filterList.bind(this)}/>
<List items={this.state.currentItems}/>
</div>
);
}
};
class List extends React.Component {
render(){
return (
<ul> { this.props.items.map(function(item) {
return <li key={item}>{item}</li> }) }
</ul>
)
}
};
ReactDOM.render(<FilteredList/>, document.getElementById('container'));
</script>
</body>
</html>
Input 有一个 onChange 侦听器,当发生某些事情时,它会为 onChange 函数提供参数。
没有这个参数,onChange 参数就不知道发生了什么变化:)
几句话:是的,它来自onChange
这里有更多内容https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange
我们有以下反应html。在回调函数 filterList() 中,我们有一个参数 'input' filterList(input)。这个对象来自哪里?这是来自 onClick 事件吗?还有哪些对象可用?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Filtered List</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id='container'></div>
<script type="text/jsx">
class FilteredList extends React.Component {
constructor(props) {
super(props);
var allItems = [ "anteater", "bear", "cat", "dog", "elephant", "fox" ];
this.state = { initialItems: allItems, currentItems: allItems };
}
filterList(input){
var updatedList = this.state.initialItems;
updatedList = updatedList.filter(function(item){
return item.search(input.target.value) !== -1;
});
this.setState({currentItems: updatedList});
}
render(){
console.log(this);
return (
<div className="filter-list">
<input type="text" placeholder="Filter" onChange={this.filterList.bind(this)}/>
<List items={this.state.currentItems}/>
</div>
);
}
};
class List extends React.Component {
render(){
return (
<ul> { this.props.items.map(function(item) {
return <li key={item}>{item}</li> }) }
</ul>
)
}
};
ReactDOM.render(<FilteredList/>, document.getElementById('container'));
</script>
</body>
</html>
Input 有一个 onChange 侦听器,当发生某些事情时,它会为 onChange 函数提供参数。 没有这个参数,onChange 参数就不知道发生了什么变化:)
几句话:是的,它来自onChange
这里有更多内容https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onchange