时间戳

首页 > 解决方案 > 将动态 onChange 侦听器传递给孩子

javascript - 将动态 onChange 侦听器传递给孩子

问题描述

我有一个有状态的组件，它持有一些状态

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

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

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

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

<ComponentA {...this.state} changed={this.onValueChange}>

在我的组件 B 中，它是 AI 的一个子组件，它希望基于给定的 props 以编程方式创建输入，并通过在每次用户输入输入时调用该函数来更改状态。

<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>

我的 Input 组件只呈现以下内容

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

由于某种原因无法使其工作。谢谢你的帮助！

标签： javascriptreactjs

解决方案

您目前正在this.props.changed通过 write 直接调用 render onValueChange={this.props.changed(propName[0])}。而不是在渲染时调用它，您应该给它一个函数，以便在onValueChange发生时调用它。

您还希望提供Input一个在状态更新之间不会改变的唯一key道具，这样 React 就不会每次都创建一个全新的组件，并且您会失去对input. 您可以propName[0]改用，这将是独一无二的。

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

推荐阅读