Текстовое поле отключается в React JS с помощью Type Script

Я использовал файл TSX для загрузки текстового поля в React JS, как показано ниже:

<input type={'text'} value={employees.length > 0 ? employees[0].name : ""} id=
{'Name'} label={'Name'} name={'Name'} htmlFor={'Name'} />

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

Так кто-нибудь может мне помочь?


reactjs javascript react-tsx
person IPS    schedule 14.09.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы не можете ничего написать, потому что вы создали контролируемый компонент, а это означает, что значение ввода всегда будет тем, что оценивает реквизит value — в данном случае employees[0].name или "".

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

В контролируемом компоненте данные формы обрабатываются компонентом React. Альтернативой являются неуправляемые компоненты, в которых данные формы обрабатываются самой DOM.

Подробнее здесь и здесь.

Вариант 1 – контролируемый компонент (рекомендуется)

Чтобы создать контролируемый компонент, вам нужно добавить прослушиватель событий onChange и обновить переменную, которую вы передаете в value. Из вашего вопроса неясно, что такое employees; если это переменная состояния или реквизита или что-то еще.

Предполагая, что это переменная состояния, вы можете сделать:

handleChange = (e) => {
  let arr = this.state.employees.slice();
  arr[0].name = e.target.value;
  this.setState({employees: arr});
}

render() {
  let {employees} = this.state;
  return (
    <input type={'text'} onChange={this.handleChange} value={employees.length > 0 ? employees[0].name : ""} id={'Name'} label={'Name'} name={'Name'} htmlFor={'Name'} />
  );
}

Вариант 2 – неконтролируемый компонент

Вам нужна только небольшая модификация, чтобы сделать ваш ввод неконтролируемым компонентом. Просто замените value на defaultValue:

<input type={'text'} defaultValue={employees.length > 0 ? employees[0].name : ""} id={'Name'} label={'Name'} name={'Name'} htmlFor={'Name'} />

В качестве примечания: вам не нужно заключать строковые литералы в скобки. Так что вместо <input type={'text'} ... вы можете просто сделать <input type='text' ..., если хотите.

person Chris    schedule 14.09.2017