Как управлять состоянием неизвестного количества текстовых областей?

Question

Я использовал функцию карты и присвоил значения textarea, используя значение, а также попытался назначить с помощью defaultValue.

Но если я использую значение, то я не могу изменить значение в функции onChange, и если я использую defaultValue, то это же значение появляется и для других значений.

// Update value
this.props.values.map((item: any) => (<TextArea onChange={this.handleChange} value={item.val}/>))

// Update defaultValue
this.props.values.map((item: any) => (<TextArea onChange={this.handleChange} defaultValue={item.val}/>))

Я ожидаю изменить textarea значение к новому значению, если требуется.

Answer 1

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

Теоретически, вы хотите сделать N состояний как текстовые поля N, односпособ сделать это - управлять единственным объектом , который содержит все состояния.

Ответ написан с помощью хуков, довольно легко сделать эквивалентный с компонентом класса.

// props.values
const VALUES = ["Hello", "World", "All Texts Areas Managed"];

function TextAreaManager() {
  // We will manage text box i
  const [valuesManager, setValuesManager] = useState([...VALUES]);
  return (
     {VALUES.map((value, i) => (
       <TextBoxItem
         key={i}
         value={valuesManager[i]}
         onChange={e => {
           // Update the value of text box i on next render.
           valuesManager[i] = e.target.value;

           // Render with new value of text box i.
           setValuesManager([...valuesManager]);
         }}
       />
     ))}
  );
}

Демо: