Question

我有一个字段组件（redux形式），该组件调用自定义ImageInput组件，该组件上载图像，然后吐出src。

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

我尝试遵循此答案，但由于我的设置似乎有些不同，所以有些困惑：How to update parent's state in 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组件也是正确的）。

任何帮助都会很棒。

Answer 1

我明白了你想做的。您说您正在使用redux表单。这是表格中唯一的输入吗？为什么更改后立即单独上传图像？

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

如果这不是一个选项，则您始终可以拥有一个类似于handleOnChange的单独的回调函数。从后端获取新的src时将调用它。这将允许您根据需要将src保持在父状态。在这种情况下，如果您需要在输入组件中包含src，则可以执行与其他解决方案相同的操作，将其作为prop向下传递。

父母

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>

通过孩子的状态<field>组件更新父母道具

1 个答案: