reactjs - 尝试使用 React 制作待办事项列表

Question

将项目添加到输入中后，当单击按钮将项目添加到列表中时，它仅创建 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>
  );
};

1. 列表项

   预计输出如下。元素但输出只是.

Answer 1

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

由于您已经有了输入更改处理程序，因此您的提交函数应该是，

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

Demo