Reactjs 尝试使用react创建待办事项列表

将项目添加到输入中后，单击按钮添加列表中的项目时，仅创建li元素，用户输入不在其中

constructor() {
    super();

    this.state = {
      userInput: "",
      list: []
    };
  }

  changeUserInput = Input => {
    this.setState({ userInput: Input.target.value });
  };
  onButtonSubmit = Input => {
    let listArray = this.state.list;
    listArray.push(Input);
    this.setState({ list: listArray });
  };

  render() {
    return (
      <div className="App">
        <Input
          changeUserInput={this.changeUserInput}
          onButtonSubmit={this.onButtonSubmit}
        />
        <ul>
          {this.state.list.map((val, index) => (
            <li key={index}>{val}</li>
          ))}
        </ul>
      </div>
    );
  }

//Input.js

const Input = ({ changeUserInput, onButtonSubmit }) => {
  return (
    <div>
      <p className="f2">{"Make a shopping list by adding items"}</p>
      <div>
        <input
          className="w-70 ma2 pa2 br-pill"
          type="text"
          placeholder="enter items"
          onChange={changeUserInput}
        />
        <div>
          <button
            className="f6 grow br-pill ba bw1 ph3 pv2 mb2 dib black
    pointer"
            onClick={() => {
              onButtonSubmit();
            }}
          >
            Add Item
          </button>
        </div>
      </div>
    </div>
  );
};

constructor（）{
超级（）；
此.state={
用户输入：“”，
名单：[]
};
}
changeUserInput=Input=>{
this.setState（{userInput:Input.target.value}）；
};
OnButtonsSubmit=输入=>{
让listArray=this.state.list；
push（输入）；
this.setState（{list:listary}）；
};
render（）{
返回(

{this.state.list.map（（val，index）=>(
{val}
))}

);
}
//Input.js
常量输入=（{changeUserInput，onButtonSubmit}）=>{
返回(
{“通过添加项目制作购物清单”}
{
onButtonSubmit（）；
}}
>
添加项
);
};

列表项

期望输出像 .项目 但输出只是

---

始终将

此.state

视为是不可变的。 您不应该通过在数组中附加值来修改数组

尝试以下方法：

const { list } = this.state;
const newList = [...list, Input]
this.setState({ list: newList })

---

在

onButtonSubmit

函数中，您试图在列表中添加

Input

，但您应该添加

this.state.userInput

onButtonSubmit = () => {
  this.setState({list: [...this.state.list, this.state.userInput]})
}

---

编辑：如其他答案中所述，使用它更安全，因为它不是改变原始数组，而是创建一个新数组。

您没有向

onButtonSubmit

函数发送参数，如果您看到以下内容：

<button 
  className= 'f6 grow br-pill ba bw1 ph3 pv2 mb2 dib blackpointer' 
  onClick ={() => {onButtonSubmit()}} >Add Item</button>

更有趣的是，在更改处理程序中，您可以在此处设置当前用户输入值：

changeUserInput = (Input) => {
  this.setState({userInput: Input.target.value});
} 

所以你的提交，应该更像

onButtonSubmit = () => {
  let listArray = [...this.state.list, this.state.userInput];
  this.setState({ list: listArray, userInput: undefined })
}

---

如果要从当前列表状态创建一个新数组，请添加新的userInput值，然后更新状态（并重置当前用户输入）

您正在直接改变状态，这是不应该做的

因为您已经有了输入更改处理程序，所以您的提交函数应该是

onButtonSubmit = () => {
  this.setState(prevState => ({
    ...prevState, 
    list:prevState.list.concat(this.state.userInput),
    userInput:''
  }
  ),()=>console.log(this.state))
}

---

好吧，仅仅是推到同一个参考点有点危险，有一点是的，在这一点上完全同意你。我将编辑我的答案，改为使用扩展运算符。嗨，Sumit，阅读此-，然后尝试关闭问题。

onButtonSubmit = () => {
  this.setState(prevState => ({
    ...prevState, 
    list:prevState.list.concat(this.state.userInput),
    userInput:''
  }
  ),()=>console.log(this.state))
}