时间戳

首页 > 解决方案 > 提升状态并访问动态创建的输入文本字段的值

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

问题描述

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

<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(title) 它正确执行此操作，我也可以正确看到父组件中的值。

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

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

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

标签： reactjs

解决方案

而不是在状态变量中存储一个字符串，而是存储一个对象，该对象可以将每个输入的标题作为其编号。将数字与事件一起传递给 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
    )   
}

推荐阅读