Javascript 获取文本输入以在ReactJS中工作

我的表单上有一些文本输入无法正常工作。我看不出输入了什么，字段在一个字符后就没有焦点了。 以下是我的代码片段：

      constructor(props) {
        super(props);
        this.state = {
          key: uuid(),
          title: "",
          author: "",
          questions: [],
          answers: []
        };

        this.handleChange = this.handleChange.bind(this);
        this.addQuestion = this.addQuestion.bind(this);
        this.removeItem = this.removeItem.bind(this)
      }

      componentDidMount() {
        // componentDidMount() is a React lifecycle method
        this.addQuestion();
      }

      handleChange(event) {
        const target = event.target;
        const value = target.type === "checkbox" ? target.checked : target.value;
        const name = target.name;

        this.setState({
          [name]: value
        });
      }

//yada yada

render() {
//yada yada
    {this.state.questions.map((question, index) => {
                    return (
                      <li>
                      <div key={uuid()}>
                        Question
                        {question}<br />
                        <button onClick={ () => this.removeItem(index) }>
                      Remove Question
                    </button>
                        Answer Choices<br />
                        {Array.from({ length: 4 }, () => (
                          <div>
                            <input type="checkbox" key={uuid()}/>
                            <input type="text" key={uuid()} onChange={this.handleChange} />
                          </div>
                        ))}
                      </div>
                      </li>
                    );
                  })}
//yada yada
}
export default App;

构造函数（道具）{
超级（道具）；
此.state={
键：uuid（），
标题：“，
作者：“，
问题：[]，
答复：[]
};
this.handleChange=this.handleChange.bind（this）；
this.addQuestion=this.addQuestion.bind（this）；
this.removietem=this.removietem.bind（this）
}
componentDidMount（）{
//componentDidMount（）是一种反应生命周期方法
这个.addQuestion（）；
}
手变（活动）{
const target=event.target；
const value=target.type==“checkbox”？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
//雅达雅达
render（）{
//雅达雅达
{this.state.questions.map（（问题，索引）=>{
返回(

问题:
{问题}

this.removietem（index）}>
删除问题
答案选择

{Array.from（{length:4}，（）=>(
))}

);
})}
//雅达雅达
}
导出默认应用程序；

---

我对此很陌生，所以任何与此问题直接相关或不相关的提示都会非常有用。谢谢

您为元素提供了唯一的键，每个渲染都使用

uuid（）

，这将破坏元素并装载新的元素。删除

键={uuid（）}

，它就会工作

{this.state.questions.map((question, index) => {
  return (
    <li key={index}>
      <div>
        Question
        {question}
        <br />
        <button onClick={() => this.removeItem(index)}>
          Remove Question
        </button>
        Answer Choices<br />
        {Array.from({ length: 4 }, (_element, index) => (
          <div key={index}>
            <input type="checkbox" />
            <input type="text" onChange={this.handleChange} />
          </div>
        ))}
      </div>
    </li>
  );
})}

{this.state.questions.map（（问题，索引）=>{
返回(

问题:
{问题}


this.removietem（index）}>
删除问题
答案选择

{Array.from（{length:4}，（\u元素，索引）=>(
))}

);
})}

谢谢你的建议，我试过了，但似乎没有效果work@dorkycam我更新了答案。为什么要使用

uuid（）

作为密钥？请阅读这篇文章。这很有效，谢谢。我使用了

uuid（）

作为键，因为每个问题有四个答案输入，并且问题的数量因用户而异。用户可以添加任意数量的问题（稍后我可能会增加一个限制），因此我认为为了跟踪哪一组问题与哪一个问题相匹配，我给了他们所有的

uuid（）

。这不是我自己想出来的，是别人给我的小费。我在网上还发现其他文章说，使用

索引
作为键是个坏主意。@dorkycam我不能肯定，但我想你误解了这个提示。如果您为数据中的每个对象提供一个
uuid
，这将是有意义的。这样你就可以重复使用相同的
uuid
每个渲染，但是将
key
设置为新的
uuid（）
每个渲染都是一个非常糟糕的主意。哈哈，好吧，你建议我如何给每个对象一个
uuid（）
？