Как заполнить или заполнить бланк реагирующей избыточности значениями, полученными с сервера?

Question

Я использую избыточную форму для редактирования информации о задачах, поэтому я получаю данные с сервера и хочу использовать их в форме. Как правильно заполнить или заполнить эту форму, а затем отредактировать ее. Я пытался заполнить поля формы, например value={task.text}, Но после этого форма не позволяет мне изменять элемент формы.

<Form className='m-10' model="editTask" encType="multipart/form-data" onSubmit={(values)=> this.handleSubmit(values)}>
  <Row className="form-group ml-1">
    <strong>Done? </strong>{' '}
    <Col md={{ offset: 1 }}>
    <Control.checkbox model=".status" name="status" className="form-check-input" /> Old value: {task.status === 0 ? 'Pending...' : 'The Task Was Done'}
    </Col>
  </Row>
  <Row className="form-group ml-1">
    Your Task
    <Col md={10}> Old value: {task.text}
    <Control.textarea model=".text" name="text" rows="12" className="form-control" />
    </Col>
  </Row>
  <Row className="form-group ml-1">
    <Col md={{ size: 10, offset: 1 }}> {task.username === '' ? 'Edit' :
    <Button type="submit" color="primary">Edit </Button> }
    </Col>
  </Row>
</Form>

Answer 1

Вы захотите создать метод handleChange в своем компоненте.

handleChange(evt) {
   this.setState({
      [evt.target.name]: [evt.target.value]
   });
}

Убедитесь, что ваше свойство состояния равно evt.target.name! Затем вы захотите связать это в своем конструкторе.

this.onChange = this.onChange.bind(this);

Наконец, в форме беспокойства вы захотите создать свойство onChange и передать свой метод handleChange.

<YourInputField onChange={this.handleChange} (and whatever other properties you have) />

Это позволит вам изменить форму. На данный момент ваше значение статично, потому что оно зависит от состояния, которое в данный момент не меняется.

Таким образом, вы можете обновить свое состояние данными, которые вы извлекаете с сервера, ТОГДА вы можете установить значение вашей формы равным этому свойству состояния, и в этот момент обработчик изменит ваше состояние, что изменит ваш ввод для вы.

Answer 2

Что касается меня, я решил эту проблему. Я использовал генератор действий Redux под названием actions.merge. Сначала это не сработало, потому что я пытался вызвать его из дочернего компонента. Но я должен был сделать это в файле MainComponent.js в хуке componentDidUpdate.

В ActionCreators.js я объявил:

import actions from 'react-redux-form';
...

export const setDefaultFormValues = (values) => (dispatch) => {
  dispatch(setDefaultUser: (values) => actions.merge(‘editTask’, values));
}

В MainComponent.js я написал:

…
import {
  setDefaultValues
} from '../redux/ActionCreators';

const mapDispatchToProps = dispatch => ({
  ...
  setDefaultValues: (values) => dispatch(setDefaultValues(values))
});

componentDidUpdate() {
  let pathname = this.props.location.pathname;
  let pos = pathname.search("/edit/") + 6;
  let taskId = pathname.substring(pos, pathname.length);
  if (taskId) {
    let tasks = this.props.tasks.tasks.tasks;
    if (tasks) {
      let task = tasks.filter(task => task.id === parseInt(taskId, 10))[0];
      if (task) {
        this.props.setDefaultValues(task);
      }
    }
  }
}