Почему я не могу изменить свое входное значение в React даже при прослушивании onChange

Question

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

Я сделал один компонент, прошел реквизит к нему из магазина, на componentWillMount Я создаю новое состояние для компонента. Рендеринг до сих пор прекрасен.

Далее я привязал свой state к значению поля ввода, и у меня есть onChange слушатель. Тем не менее, я не могу изменить свои ценности в поле.

Так как, я из Углового фона, я предполагаю, что значение привязки для ввода, как показано ниже, автоматически обновит свойство name в state объекте. Я здесь не прав?

componentWillMount(){ 
      this.setState({ 
          updatable : false, 
          name : this.props.name, 
          status : this.props.status 
         }); 
     } 

    //relevant DOM from component's render function 
    <input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={this.onTodoChange.bind(this)}/> 

onTodoChange(){ 
     console.log(this); 
     //consoling 'this' here, shows old values only. 
     //not sure how and even if I need to update state here. 
     // Do I need to pass new state to this function from DOM 
     //TODO: send new data to store 
    } 

Моя onTodoChange функция консоли значение this, которое имеет такое же значение состояния как при инициализации. Как перейти к изменению состояния, введя поля ввода, чтобы я мог отправить их в магазины.

Answer 1

В отличие от случая Угловое, в React.js вам нужно обновить вручную. Вы можете сделать что-то вроде этого:

<input className="form-control" type="text" value={this.state.name} id={'todoName' + this.props.id} onChange={e => this.onTodoChange(e.target.value)}/> 

, а затем в функции:

onTodoChange(value){ 
     this.setState({ 
      name: value 
     }); 
    } 

Кроме того, вы можете установить начальное состояние в конструкторе компонента:

constructor (props) { 
    this.state = { 
     updatable: false, 
     name: props.name, 
     status: props.status 
    }; 
    } 

Answer 2

В ответьте, что компонент будет повторно отображать (или обновлять) только в случае изменения состояния или опоры.

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

onTodoChange(event){ 
      // update the state 
      this.setState({name: event.target.value}); 
    } 

Answer 3

В реакции состояние не изменится, пока вы не сделаете это с помощью this.setState({}); , поэтому консоль сообщение, показывающее старые значения