将项目添加到React中的列表

问题描述 投票:1回答:2

我想在当前水果列表中添加一个新水果,但是我不确定该怎么做,我目前在提交时发布了一个空字符串,只是在列表中添加了一个空字符串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;
javascript reactjs
2个回答
1
投票

尚不清楚哪种元素调用HandleSubmit,但可以说它是输入的,因此代码是]]

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

0
投票

这是如何在ReactJS中将数据从子组件传递到其父组件的问题:

© www.soinside.com 2019 - 2024. All rights reserved.