reactjs - 通过孩子的状态更新父母道具零件

Question

我有一个字段组件（redux-form），它调用一个上传图像的自定义 ImageInput 组件，然后吐出 src。

我需要将该 src 从我的子组件传递到父组件，它通过处理程序更新父组件状态。

我试图遵循这个答案，但有点困惑，因为我的设置似乎有点不同：如何在 React 中更新父母的状态？

这是我的父组件

handleChange(e) {
  console.log(e)
  this.setState({[e.target.name]: e.target.value});
}

<Field
  {...this.props}
  component={ImageInput}
  name="templating.img"
  onChange={this.handleChange.bind(this)}
/>

然后是我的孩子输入和上传图像的地方

constructor(props) {
  console.log('props', props);
  super(props);
  this.state = {
    src: null
  }
  console.log(this.state)
}

_imgUpload = (e) => {
  e.preventDefault();
  // console.log(e.target.files)
  if (e.target.files.length === 1) {
    let file = e.target.files[0]
    loadImage(e.target.files[0])
    .then(uploadThumbor)
    .then(formatImage)
    .then(({src, dataUri}) => {
      this.setState({src: src})
      console.log('img', src)
    })
  }
}

/* Snippet where the image upload occurs */
<div style={styles.image}>
  <div style={styles.defaultPreview}></div>
  <div style={styles.sample}></div>
  <input type="file" style={styles.uploadPreview} accept="image/*" onChange={this._imgUpload} />
</div>

上传图片后，我在子组件中设置状态。我需要将该状态传递给它将更新其状态的父级。我不认为onChange={this.handleChange.bind(this)}在这种情况下对于这个父组件是正确的（对于其他简单输入的 Field 组件是正确的）。

任何帮助都是极好的。

标签： reactjscomponentsstatereact-props

Answer 1

我明白你想要做什么。你说你使用的是 redux 形式。这是表单中唯一的输入吗？为什么它一改变就单独上传图像？

我问这是因为对 api 的调用通常是从父容器中分派的。如果此 api 调用特定于此页面，我建议将其移至父级并保持父级中的 src 状态。如果您在这里需要它，您可以随时将其作为道具传递。

如果这不是一个选项，您始终可以使用类似于handleOnChange. 当您从后端获取新的 src 时，它会被调用。这将允许您根据需要将 src 维护在父状态。在这种情况下，如果您需要在输入组件中包含 src，您可以执行与其他解决方案相同的操作，将其作为道具传递。

家长

handleChange(e) {
  console.log(e)
  this.setState({[e.target.name]: e.target.value});
}

handleSrcChange(src) {
  this.setState({ imageSrc: src });
}

<Field
  {...this.props}
  component={ImageInput}
  name="templating.img"
  onChange={this.handleChange.bind(this)}
  onSrcChange={this.handleSrcChange.bind(this)}
/>

---

输入组件

_imgUpload = (e) => {
  e.preventDefault();
  // console.log(e.target.files)
  if (e.target.files.length === 1) {
    let file = e.target.files[0]
    loadImage(e.target.files[0])
    .then(uploadThumbor)
    .then(formatImage)
    .then(({src, dataUri}) => {
      this.props.onSrcChange(src);
      console.log('img', src)
    })
  }
}

/* Snippet where the image upload occurs */
<div style={styles.image}>
  <div style={styles.defaultPreview}></div>
  <div style={styles.sample}></div>
  <input type="file" style={styles.uploadPreview} accept="image/*" onChange={this._imgUpload} />
</div>