Question

我有一个包装<input>的组件，以便我可以添加功能以提供更新默认值。以下是示例用法：

<Input type="text" follow={this.state.someData} onChange={this.onChangeHandler} />

所以当父级的状态更新时，这个子组件会收到新的道具，它用于（可能）更新包装的input元素的值（代码片段，而不是整个事物）：

componentWillReceiveProps(nextProps) {
  this.setState({value: nextProps.follow})
}

render() {
  input_props = this.props
  input_props.onChange = this.props.onChange //being explicit for clarity
  input_props.value = this.state.value
  return React.createElement(
    'input',
    input_props
  )
}

但是，此更新不会触发onChange处理程序。从理论上讲，如果我可以创建一个合适的SyntheticEvent，那么我可以this.props.onChange(event)，但我找不到有关创建该对象的信息。

如果你有这些解决方案，我也会接受其他解决方案。

编辑：

有趣。事件被调用（woops！），但event.target是原始元素，而不是Input元素：

<input type="text" id='1' onChange={(e) => {this.setState({someData: e.target.value})} />
<Input type="text" id='2' follow={this.state.someData} onChange={this.onChangeHandler} />

onChangeHandler从第一个输入（id = 1）接收事件，而不是第二个输入。这导致我的事件处理程序出错，因为它期待的信息不存在。

编辑2：非常确定我仍然希望以同样的方式处理此问题 - 我仍然希望包裹的input抛出onChange事件，就像它已被更改一样。

收到新道具时触发onChange

0 个答案: