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

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

0 голосов
/ 19 сентября 2018

Я использую избыточную форму для редактирования информации о задачах, поэтому я выбираю данные с сервера и хочу использовать их в форме.Как правильно заполнить или заполнить эту форму, а затем отредактировать ее.Я попытался заполнить поля формы, например 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>

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Что касается меня, я решил эту проблему.Я использовал генератор действий 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);
      }
    }
  }
}
0 голосов
/ 20 сентября 2018

Вы захотите создать метод 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) />

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

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

...