Блог

Главная - Вопросы по программированию - Реагируйте на пользовательский элемент управления TextInput, не способный ничего вводить

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

#javascript #reactjs #react-native #textinput

Вопрос:

У меня есть контрольный MyCustomTextInput следующим образом

 function MyCustomTextInput (props)
 return {
    <div>
       <TextInput
            value={props.value} </TextInput>
    </div>
}

Этот MyCustomTextInput используется в форме следующим образом

 <td>
   <MyCustomTextInput value="MyModelClass.MyName"> </MyCustomTextInput>
</td>
<td>
   <MyCustomTextInput value="MyModelClass.MyAddress"> </MyCustomTextInput>
</td>

Проблема, с которой я сталкиваюсь, заключается в том, что я вижу, что мое имя и мой адрес загружены в пользовательский элемент управления, НО я НИЧЕГО НЕ МОГУ ВВЕСТИ в текстовый элемент управления

Не могли бы вы, пожалуйста, дать мне знать, чего мне здесь не хватает

Ценю вашу помощь

Комментарии:

1. Я не знаком с собственным языком React, но чтобы использовать форму и входные данные с vanilla React , я должен создать состояние для входных данных и применить setState его в onChange атрибуте Input элемента. Похоже, вам не хватает onChange обработчика, поэтому ваши входные данные не реагируют и не отображаются повторно при вводе. Дополнительную информацию смотрите в документах, которые я связал.

2. Вы не меняете значение onChange Для этого вам нужно управлять состоянием.

Ответ №1:

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

 function MyCustomTextInput (props) {
    return (
        <div>
            <textarea defaultValue={props.value}></textarea>
        </div>
    );
}

Следующее, что я рекомендую вам, — это иметь состояние компонентов для элементов формы, таких как область текста, ввод и т. Д… Поэтому я бы сделал так, чтобы это выглядело так:

 function MyCustomTextInput (props) {
    const [textareaValue, setTextareaState] = useState(props.value);
    const handleTextareaChange = (event) => setTextareaState(event.target.value);

    return (
        <div>
            <textarea defaultValue={textareaValue} onChange={handleTextareaChange}></textarea>
        </div>
    );
}
Метки: ,