我想在当前水果列表中添加一个新水果,但是我不确定该怎么做,我目前在提交时发布了一个空字符串,只是在列表中添加了一个空字符串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;
尚不清楚哪种元素调用HandleSubmit,但可以说它是输入的,因此代码是]]
handleSubmit = e => {
e.preventDefault();
const fruitName = e.target.value;
const fruits = [...this.state.fruits, fruitName];
this.setState({ fruits });
};
这是如何在ReactJS中将数据从子组件传递到其父组件的问题: