Question

我有一个有状态的组件，其中包含一些状态

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

以及用于更新onChange侦听器状态的函数

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

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

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

在我的组件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>

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

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

由于某种原因无法使其正常工作。感谢您的帮助！

Answer 1

您当前正在通过编写df1 <- structure(list(X = c("mary smith", "mary smith", "mike williams" ), Y = c("mary smith", "john smith", "jack johnson")), .Names = c("X", "Y"), class = "data.frame", row.names = c("1", "2", "3"))直接在渲染上调用this.props.changed。与其在渲染器上调用它，不如在发生onValueChange={this.props.changed(propName[0])}时调用它。

您还想给onValueChange一个独特的Input道具，该道具在状态更新之间不会改变，这样React不会每次都创建一个全新的组件。失去key的关注。您可以改用input，这将是唯一的。

propName[0]

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

1 个答案: