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

Posted 2023-02-23

【中文标题】通过孩子的状态 <Field> 组件更新父母道具

【英文标题】：Updating parents props via child's state <Field> Component

【发布时间】：2019-04-17 13:28:29

【问题描述】：

我有一个字段组件（redux-form），它调用一个上传图像的自定义 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 组件是正确的）。

任何帮助都会很棒。

【参考方案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>