javascript - 在 React 中将项目添加到列表

Question

我想在当前水果列表中添加一个新水果，但我不确定该怎么做，我目前在提交时发布了一个空字符串，它只是添加了一个空字符串 li 到列表

我的水果列表组件如下;

import AddFruit from './AddFruit';

class Fruits extends Component {
  state = {
    fruits: ['apple', 'banana']
  };

  render() {
    const { fruits } = this.state;
    return (
      <div style={{ paddingTop: 30 }}>
        <AddFruit handleSubmit={this.handleSubmit} />
        {fruits.map(fruit => {
          return (
            <ul key={fruit}>
              <li>{fruit}</li>
            </ul>
          );
        })}
      </div>
    );
  }

  handleSubmit = e => {
    const { fruits } = this.state;
    e.preventDefault();
    this.setState({ fruits });
  };
}

export default Fruits;

我的水果加法器如下...我知道他们完全错了，但我很难弄清楚这一点，而且已经很晚了:(

class AddFruit extends Component {
  state = {
    addItem: ''
  };
  render() {
    const { addItem } = this.state;
    return (
      <div>
        <form onSubmit={this.handleSubmit} style={{ paddingTop: 35 }}>
          <input
            type="text"
            value={addItem}
            placeholder="Add Item"
            onChange={this.handleChange}
          />
          <button
            onClick={this.props.handleSubmit}
            className="btn btn-primary btn-sm"
          >
            Add Fruit
          </button>
        </form>
      </div>
    );
  }

  handleChange = event => {
    console.log(event.target.value);
    const { value } = event.target;
    this.setState({ addItem: value });
  };
}

export default AddFruit;

Answer 1

不清楚是什么类型的元素调用了 HandleSubmit，但可以说它是输入的，所以代码是

handleSubmit = e => {
  e.preventDefault();
  const fruitName = e.target.value;
  const fruits = [...this.state.fruits, fruitName];
  this.setState({ fruits });
};