Вход не изменяет состояние REACTJS - PullRequest
0 голосов
/ 18 марта 2019

Ввод не меняет текст.Он поставляется предварительно заполненным из базы данных.Например, если он приходит с текстом: example, если я нажимаю, например, клавишу s, консоль регистрирует examples, но в DOM in все равно example.Вот код handle:

handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
    console.log(event.target.name);
    console.log(event.target.value);
  };

и поле ввода:

<input 
  type="text" 
  className="form-control" 
  name="note" 
  id=" note" 
  value={this.state.insurance.note} 
  onChange={this.handleChange}
/>

EDIT ( исправил проблему рендеринга, но я нея получаю данные, которые мне нужны, когда я отправляю форму ) Вот код моей формы:

handleSubmit = event => {
    event.preventDefault();
    var state = this.state;
    axios
      .put(`${API_URL}/` + state.id + `/update`, {
        tip: state.tip,
        date_exp: state.date_exp,
        date_notif: state.date_notif,
        note: state.note
      })
      .then(response => {
        console.log(response.data);
        // window.location = "/view";
      })
      .catch(error => {
        console.log(error);
      });
  }

, а моя кнопка - простая кнопка отправки:

<button className="btn btn-success" type="submit">Save</button>

Ответы [ 2 ]

2 голосов
/ 18 марта 2019

imjared ответ правильный: ваша проблема в функции handleChange, где вы ошибочно обновляете состояние.
Эта функция должна выглядеть примерно так:

handleChange = event => {
    const insurance = Object.assign({}, this.state.insurance);
    insurance[event.target.name] = event.target.value;

    this.setState({insurance});
  };

В первой строке функции вы создаете глубокую копию текущего объекта insurance, сохраненного в состоянии. Затем вы обновляете скопированный объект и, наконец, обновляете состояние.

2 голосов
/ 18 марта 2019

Вы изменяете this.state.note на основе свойства name вашего ввода, поэтому имеет смысл, что this.state.insurance.note не увидит никаких обновлений.

Если вы попробуете console.logging this.stateвыше вашего <input>, держу пари, вы увидите, что вы ищете.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...