Question

我想为用户创建的每个类别动态创建输入字段值，问题是如何跟踪用户输入到输入字段的内容。因为我不能创建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>
      )
})

Answer 1

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

React文档有一个与此问题核心相关的部分： https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

假设你的州拥有一系列“类别”对象 - 基本上，我认为你所寻找的东西可归结为地图函数中的类似内容：

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

然后是一个看起来像这样的变更处理程序：

handleCategoryChange = (category, event) => {
  const value = event.currentTarget.value;
  this.setState(state => {
    // Create a copy of the categories array:
    const categories = [...state.categories];

    // Create a copy of the category, with an updated value:
    categories[category.index] = {
      ...category,
      value
    };

    // Update state with the new values:
    return { categories };
  });
};

这是一个简单的演示： https://codesandbox.io/s/woqpwvl777

Answer 2

我有其他方法可以做到这一点，当然这种方式在某些情况下效果很好，例如当你只有1或3个值时

我认为你想要创建输入，并且输入是动态的，你想要定义，如果用户点击第一个按钮，你得到并使用第一个TextInput（值）

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

export type StepFunctionState = IStepFunctionTask 
    | IStepFunctionChoice 
    | IStepFunctionWait;

const mixedBag: IDictionary<StepFunctionState> = {
    ...task,
    ...choice,
    ...wait
};

在此结构中的值键，如果在

之前未定义值，则在装载中不包含任何值或空值

现在我创建了一个处理程序方法和此方法，在

上触发onChange事件后调用

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

该元素，这意味着当用户开始填充输入onChange事件句柄功能并更新你的状态时

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

我在这个地址创建了笔 - ＆gt; https://codepen.io/hamidrezanikoonia/pen/vRyJRx?editors=1111

您可以查看控制台，了解更多详情（在codepen中打开控制台选项卡）有关更多详细信息，我创建了两个方法，第一个在输入（文本）填充时触发（onChange事件），另一个在单击按钮时触发（单击事件）

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

2 个答案: