Обновление родительского реквизита через состояние ребенка <Field>Компонент

Question

У меня есть компонент Field (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)} является правильным для этого родительского компонента в данном случае (это верно для других компонентов поля, которые являются простыми входными данными).

Любая помощь будет потрясающей.

Answer 1

Я понимаю, что вы пытаетесь сделать. Вы сказали, что используете излишнюю форму. Это единственный вход в форме? Почему оно загружает изображение отдельно, как только оно меняется?

Я спрашиваю, потому что вызов 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>