Javascript 动态添加输入字段并跟踪输入内容_Javascript_Reactjs

Javascript 动态添加输入字段并跟踪输入内容

javascript reactjs

Javascript 动态添加输入字段并跟踪输入内容,javascript,reactjs,Javascript,Reactjs,我想为用户创建的每个类别动态创建输入字段值，问题是如何跟踪用户在输入字段中输入的内容。因为它是动态的，所以我不能创建X个状态。任何提示都将不胜感激，我的代码如下所示： var categories = newData.map((category,index) => { console.log(category) return ( <div className="content row marginCenter" key={category._i

我想为用户创建的每个类别动态创建输入字段值，问题是如何跟踪用户在输入字段中输入的内容。因为它是动态的，所以我不能创建X个状态。任何提示都将不胜感激，我的代码如下所示：

var categories = newData.map((category,index) => {
      console.log(category)
      return (
        <div className="content row marginCenter" key={category._id}>
          <p>{category.category}</p>
          <input type="text" /> //How do I keep track of what was entered for this input field??
          <button onClick={() => this.addCategoryLink(category._id)}>Add 
      link</button>
        </div>
      )
})

var categories=newData.map（（类别、索引）=>{
console.log（类别）
返回(
{category.category}
//如何跟踪为该输入字段输入的内容？？
this.addCategoryLink（category.\u id）}>Add
链接
)
})

我想知道如何将其绑定到button元素

React文档中有一部分与此问题的核心相关：

假设您所在的州拥有一个“categories”对象数组——本质上，我认为您要查找的对象可以归结为map函数中的以下内容：

{this.state.categories.map(category => (
  <input
    type="text"
    onChange={event => this.handleCategoryChange(category, event)}
    value={category.value}
  />
)}

下面是一个简单的演示：

我想知道如何将其绑定到button元素

React文档中有一部分与此问题的核心相关：

假设您所在的州拥有一个“categories”对象数组——本质上，我认为您要查找的对象可以归结为map函数中的以下内容：

{this.state.categories.map(category => (
  <input
    type="text"
    onChange={event => this.handleCategoryChange(category, event)}
    value={category.value}
  />
)}

下面是一个简单的演示：

我有其他方法来实现这一点，当然，这种方法在某些情况下效果很好，例如，当您只有1或3个值时

我想你们需要创建输入，输入是动态的，你们需要定义它，若用户点击第一个按钮，你们得到并使用第一个文本输入（值）

以我的方式（我再说一遍：在某些情况下，这种方式很好），我们创建数据Json如下

[
  { id: n ,
    category: 'some',
    value: ''
   }

在此结构值键中，如果之前未定义值，则在装入时不包含任何内容或null值

现在，我创建了一个处理程序方法和这个方法，在启动onChange事件后调用

<input onChange={(e) => this.getValue(category.id,e)} />

我在此地址创建钢笔->

您可以查看console，以了解更多详细信息（在codepen中打开console选项卡）

关于更多细节，我创建了两个方法，第一个是在输入（文本）填充时触发的（onChange事件），另一个是在单击按钮时触发的（click事件）

我有其他方法来实现这一点，当然这种方法在某些情况下工作得很好，例如当您只有1或3个值时