答案 0 :(得分：1)
如果您想传递其他参数，例如index或id，您可以使用内联匿名函数，也可以将Item转换为可以拥有的class组件它是自己的handleChange方法。
这样，如果你传递另一个prop，例如indexId，它可以通过处理程序将其传回。
在render块内创建的内联处理程序的问题是在每个render上创建了一个新函数，这可能会导致性能下降。
这就是为什么我更喜欢组件组合方法。
以下是您的代码并进行了一些修改：
class App extends React.Component {
state = {
items: []
};
componentDidMount() {
this.setState({
items: [
{
name: "jacob",
hair: "brown",
sex: "male"
},
{
name: "hannah",
hair: "brown",
sex: "female"
}
]
});
}
handleChange = (value, indexId) => {
const { items } = this.state;
const nextItems = items.map((item,index) => {
if(indexId !== index) return item;
return {
...item,
name: value
}
});
this.setState({items: nextItems});
}
render() {
const { items } = this.state;
return (
<div>
{items.length &&
items.map((item, index) => (
<div className="row mt-5" key={index}>
<Item item={item} handleChange={this.handleChange} indexId={index} />
</div>
))}
</div>
);
}
}
class Item extends React.Component {
handleChange = ({target}) => {
const {handleChange, indexId} = this.props;
handleChange(target.value, indexId);
}
render() {
const { item } = this.props;
return (
<div className="col">
<div className="mt-5" value={item.name}>
{item.name}
</div>
<select onChange={this.handleChange}>
<option value="jacob">Jacob</option>
<option value="hannah">Hannah</option>
<option value="tom">Tom</option>
<option value="kim">Kim</option>
<option value="terry">Terry</option>
</select>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
修改
作为评论的后续内容：
但Item组件中的handleChange方法看起来像外来的 语言给我。你介意解释这里发生了什么，或者 也许链接到一些阅读材料，所以我可以变得更熟悉 用它？
这是ES2015 destructuring syntax。
const {handleChange, indexId} = this.props;
与做：
相同const handleChange = this.props.handleChange;
const indexId = this.props.indexId;
这将从传递给处理程序的事件中提取目标属性：
handleChange = ({target}) => {
而不是这样做：
handleChange = (e) => {
// e.target