Ниже приведен пример кода, это типичное контролируемое поле.

export default class NameForm extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
      <form>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Я могу понять, что если я введу какой-либо текст в поле, значение будет отражено в текстовом поле благодаря функции setState и опорам value ввода.

Но если я изменил вход ниже. Я удалил реквизиты value .

<input type="text" onChange={this.handleChange} />

В настоящее время, если я введу какое-либо значение в поле, оно останется там, но, насколько мне известно React , вход будет отображаться после setState , но Реквизиты значения не установлены, по моему мнению, вход будет очищен. Не могли бы вы объяснить это подробно для меня?

0
liam xu 7 Сен 2017 в 09:29

3 ответа

Лучший ответ

Я думаю, что вы упустили важный момент здесь. После вызова setState будет вызван рендер компонента, но это не создаст заново компонент ввода с нуля. Внутренняя реакция будет проверять и применять только те изменения, которые произошли с фактическим DOM.

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

Этот процесс называется reconciliation, и вы можете узнать больше об этом здесь .

1
Amid 7 Сен 2017 в 06:40

Установка значения для элемента ввода делает его контролируемым входом. Контролируемые входы всегда показывают значение, указанное в их реквизите. Например, если у вас есть этот вход:

<input value='constant' onChange={({target: {value}}) => this.setState({value})}/>

Пользователь не может изменить его значение. но если вы не предоставите значение prop для своего ввода, это не контролируемое значение, и оно показывает значение, которое вводит пользователь. То же самое верно для флажков, переключателей и т. д.

Так что в вашем случае он обновляется на основе пользовательского ввода, потому что он не является контролируемым компонентом (потому что вы не указали для него значение) Если вы хотите установить начальное значение для компонента, но оставить его неуправляемым (пользователь может изменить значение компонента), вы можете установить начальное значение с помощью defaultValue prop.

Вы можете прочитать больше здесь: https://facebook.github.io/react/docs/forms.html

1
Sassan 7 Сен 2017 в 08:04

Вы не должны устанавливать value, просто defaultValue, вот так

<input type="text" defaultValue={this.state.value}

Затем handleChange убедится, что состояние обновлено.

0
Mikkel 7 Сен 2017 в 06:33