如何管理未知数目的文本区域的状态？

Question

我使用了映射功能，并使用值将值分配给了textarea，还尝试了用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的值更改为新值。

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

演示：