Javascript 将动态onChange侦听器传递给子级

我有一个状态组件，它保存一些状态

state={
  name:'',
  age:'',
  occupation:''
}

以及一个更新状态onChange侦听器的函数

onValueChange = (key, event) => {
  this.setState({ [key]: event.target.value });
};

我把状态和功能作为道具传递给孩子

在我的组件B（a的子组件）中，我希望基于给定的道具以编程方式创建输入，并通过每次用户输入时调用该函数来更改状态

<ComponentB>

{  Object.entries(this.props)
    .filter(
      prop =>
        prop[0] !== 'changed'
    )
    .map(propName => (
      <Input
        key={propName}
        label={propName[0]}
        value={propName[1]}
        onValueChange={this.props.changed(propName[0])}
      />
    ))}

  </ComponentB>

{Object.entries（this.props）
.过滤器(
道具=>
道具[0]！==“已更改”
)
.map（propName=>(
))}

我的输入组件只呈现以下内容

  <input
     onChange={this.props.onValueChange}
     value={this.props.value}
     type={this.props.type}
     placeholder="&nbsp;"
   />

由于某种原因，它无法工作。

---

谢谢你的帮助

您当前正在通过编写

onValueChange={this.props.changed（propName[0]）}

在渲染时直接调用

this.props.changed

。与其在渲染时调用它，不如在出现

onValueChange

时给它一个调用函数

您还希望为

输入

提供一个唯一的

键

道具，该键在状态更新之间不会改变，这样React不会每次都创建一个全新的组件，例如，您会失去

输入

的焦点。您可以改为使用

propName[0]

，这将是唯一的

<Input
  key={propName[0]}
  label={propName[0]}
  value={propName[1]}
  onValueChange={event => this.props.changed(propName[0], event)}
/>

this.props.changed（propName[0]，event）}
/>

试着写

onValueChange={event=>this.props.changed（propName[0]，event）}

。它可以工作，但由于某些原因，每次击键后输入都会失去焦点。太好了。这是因为

propName

会更改每次渲染，所以

键会更改并创建一个全新的组件。啊，我明白了，我能解决这个问题吗？这样我的输入会正常工作，但会动态渲染？错过了，谢谢！正如预期的那样，你能提供一个简短的答案吗，这样我就可以投票并结束？