javascript - 如何管理未知数量的文本区域的状态？

Question

我已经使用 map 函数并使用 value 将值分配给 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 区域文本框，一种方法是管理一个单个对象包含所有状态。

The answer is written with hooks, it's pretty easy to make equivalent one with a class component.

// 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]);
         }}
       />
     ))}
  );
}

演示: