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>
  );
};

列表项

预期输出如。项目但是输出只是

Answer 1

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

由于您已经具有输入更改处理程序，因此您的Submit函数应为

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

Demo

Answer 2

始终将this.state视为不变。您不应该通过在数组中附加值来修改数组。

尝试以下方法：

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

Answer 3

在您的onButtonSubmit函数中，您试图在列表中添加Input，但是您应该添加this.state.userInput

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

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

Answer 4

如果您查看此信息，则不会向onButtonSubmit函数发送参数：

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

没有提供任何参数，但是，您确实希望在这里输入一个参数：

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

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

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

所以您提交的内容应该更像

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

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

尝试使用react

4 个答案: