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

Question

我已经使用了 map 函数并将值分配给textareausing 值，并且还尝试使用defaultValue.

但是，如果我使用 value，那么我无法更改 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值更改为新值。

标签： javascriptreactjsantd

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

演示：