如何在ReactJS中获取动态生成输入框的值？

嘿，我来给你几个实用的解决思路，帮你搞定动态生成输入框的值获取问题：

这是最符合React设计理念的方式——把每个输入框的值和组件的state绑定起来。因为你是基于日期生成输入框，每个日期都是唯一标识，所以可以用一个对象来存储所有输入值：

首先在组件的state里初始化一个存储输入值的对象：

state = {
  inputValues: {} // 键为日期字符串（比如"Mon, 01-01"），值为对应输入框的内容
};

然后修改你的输入框渲染代码，加上value和onChange属性：

<input 
  type="text" 
  key={displayedDay} // 这里注意：displayedDay是字符串，直接用它当key就好，之前的displayedDay.id是错误的
  size="3"
  value={this.state.inputValues[displayedDay] || ''} // 用state里的值作为输入框的当前值
  onChange={(e) => {
    // 更新state，把当前输入框的值对应到对应的日期键上
    this.setState(prevState => ({
      inputValues: {
        ...prevState.inputValues,
        [displayedDay]: e.target.value
      }
    }));
  }}
/>

这样一来，用户每次输入内容，state都会实时更新。之后你要获取所有输入值的话，直接访问this.state.inputValues就可以了，这个对象里包含了每个日期对应的输入内容。

如果你不想用受控组件，也可以通过React的refs来直接获取DOM元素的值。我们可以创建一个对象来存储每个输入框的ref，键还是用日期字符串：

首先在组件里定义一个存储refs的对象：

inputRefs = {}; // 或者用React.createRef()，但普通对象更灵活

然后修改输入框的代码，给每个输入框绑定ref：

<input 
  type="text" 
  key={displayedDay}
  size="3"
  ref={(el) => { this.inputRefs[displayedDay] = el; }} // 把当前输入框DOM元素存入refs对象
/>

之后在需要获取值的地方（比如按钮点击事件），遍历这个refs对象就能拿到所有输入值：

getAllInputValues() {
  const allValues = {};
  Object.keys(this.inputRefs).forEach(day => {
    allValues[day] = this.inputRefs[day].value;
  });
  // allValues就是所有输入框的键值对了，你可以在这里处理这些值
}

不过要注意，这种方式属于非受控组件，适合不需要实时同步state的场景，React官方更推荐受控组件的方案哦。

如果这些输入框包裹在一个<form>标签里，你也可以在表单提交时通过原生JS的DOM查询来获取值。我们可以给每个输入框加一个自定义属性来标识对应的日期：

修改输入框代码：

<input 
  type="text" 
  key={displayedDay}
  size="3"
  data-day={displayedDay} // 自定义属性，存储对应的日期
/>

然后在表单的提交事件里获取所有输入值：

handleFormSubmit(e) {
  e.preventDefault(); // 阻止表单默认提交行为
  const inputElements = document.querySelectorAll('input[data-day]');
  const allValues = {};
  inputElements.forEach(input => {
    const day = input.getAttribute('data-day');
    allValues[day] = input.value;
  });
  // 在这里处理获取到的allValues
}

另外提个小细节：你原来的代码里key={displayedDay.id}是有问题的，因为displayedDay是你用moment格式化后的日期字符串（比如"Tue, 02-01"），它并没有id属性，直接用displayedDay作为key就可以了，因为每个日期都是唯一的，这样能避免React的key警告。

内容的提问来源于stack exchange，提问作者Amir Bouzid