提升状态并访问动态创建的输入文本字段的值答案

【问题标题】：Lifting state up and accessing values of a dynamically created input text field提升状态并访问动态创建的输入文本字段的值
【发布时间】：2021-06-10 07:12:47
【问题描述】：

在我的组件中，我打开了一个 Modal 并传递了一个这样的表单：-

<Modal
  show={showGroupModal}
  onCancel={closeGroupModalHandler}
  header="Please add Group Name"
  contentClass="player-admin__modal-content"
>
  <div>
    <form onSubmit={addGroupSubmitHandler}>
      <NonFormikInput
        type="text"
        placeholder={formatValue ? "Enter Group Name" : "Enter Team Name"}
        nogat={nogat}
        getTextValue={getTextValueHandler}
      />
      <Button type="submit" text="Submit"></Button>
      <Button type="button" text="Cancel" onClick={closeGroupModalHandler}>
        {" "}
      </Button>
    </form>
  </div>
</Modal>

值 {nogat} 是从 MONGODB 集合中获取的变量值。这个值被传递给一个子组件，我在其中使用 .map() 根据通过 nogat 传递的数字创建输入框的数量，如下所示：-

const NonFormikInput = (props) => {
    const [title, setTitle] = useState('')
    const changeHandler = (event) => {
        setTitle(event.target.value)
        props.getTextValue(title)
    }
    const newValues = [...Array(props.nogat)].map((_,i) => i + 1)
    const newValues1 = newValues.map(number => {
        return (
            <input
            key={number}
            id={number}
            className="non-formikinput__text"    
             type={props.type} 
             placeholder={props.placeholder}
             onChange={changeHandler}
             value={title}
             />        
        )
    })
    return (
        newValues1
    )   
}

此组件中的 onChange 函数理想情况下应该通过此语句提升状态 props.getTextValue(标题) 它正确地执行了此操作，我也可以正确地看到父组件中的值。

我的问题：- 在子组件中，输入文本字段的连接方式是，我在任何一个输入字段上键入的任何内容都会反映在所有后续文本框中。

我认为这可能是因为我将 value 属性连接为状态字段标题，而现在这已传播到来自 .map 函数的所有输入字段中。

有没有办法分离输入值，以便我能够唯一地从每个字段中捕获值

【问题讨论】：

标签： reactjs

【解决方案1】：

不是在状态变量中存储一个字符串，而是存储一个对象，该对象可以具有每个输入的标题，键作为其编号。将数字与事件一起传递给 changeHandler 以设置标题。现在在父元素中，您可以通过数字访问任何输入的文本。

const NonFormikInput = (props) => {
    const [titles, setTitles] = useState({})
    const changeHandler = (event, number) => {
        setTitles({...titles, [number]: event.target.value});
        props.getTextValue(titles)
    }
    const newValues = [...Array(props.nogat)].map((_,i) => i + 1)
    const newValues1 = newValues.map(number => {
        return (
            <input
            key={number}
            id={number}
            className="non-formikinput__text"    
            type={props.type} 
            placeholder={props.placeholder}
            onChange={(event) => changeHandler(event, number)}
            value={number in titles ? titles[number] : ""}
            />        
        )
    })
    return (
        newValues1
    )   
}

【讨论】：