React:我想将我的Add组件表单输入发送到我的Browse组件以进行查看

Question

非常感谢@spakmad和@Leon Bogod的迅速回应，肯定取得了一些进展。

但是，当我输入信息时，它会实时显示，然后当我单击提交时，它就会消失。我不介意这些信息出现在直播中，但我想保存它，这样我将来可以添加更多。

浏览(父(组件：

import React, { Component } from 'react';
import Add from "./Add";
class Browse extends Component {
constructor(props){
super(props);
this.state = {
name: "",
time: "",
ingredients: [],
directions: []
};
this.handleNameChange = this.handleNameChange.bind(this);
this.handleTimeChange = this.handleTimeChange.bind(this);
this.handleIngredientsChange = this.handleIngredientsChange.bind(this);
this.handleDirectionsChange = this.handleDirectionsChange.bind(this);
}
handleNameChange(event) {
this.setState({
name: event.target.value
});
}
handleTimeChange(event) {
this.setState({
time: event.target.value
});
}
handleIngredientsChange (event) {
this.setState({
ingredients: event.target.value
});
}
handleDirectionsChange (event) {
this.setState({
directions: event.target.value
});
}
render() {
return (
<div>
<Add
handleName={this.handleNameChange}
handleTime={this.handleTimeChange}
handleDirections={this.handleDirectionsChange}
handleIngredients={this.handleIngredientsChange}
/>
{this.state.name}
{this.state.time}
{this.state.ingredients}
{this.state.directions}
</div>
)
}
}
export default Browse;

浏览(子(组件：

import React, { Component } from 'react';
import Browse from "./App";
import './Add.css';

class Add extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div id="container">
<h2>Add</h2>
<form>
<br/>
{/*NAME*/}
<input
name="name"
type="text"
placeholder="Name"
onChange={this.props.handleName}
/>
<br/>
<br/>
{/*TIME*/}
<label>Duration of recipe</label>
<br/>
<select
name="time"
onChange={this.props.handleTime}
>
<option value="Null">Select</option>
<option value="Less than an hour">Less than an hour</option>
<option value="1 to 2 hours">1 to 2 hours</option>
<option value="2 to 3 hours">2 to 3 hours</option>
<option value="3 or more hours">3 or more hours</option>
</select>
<br/>
<br/>
{/*INGREDIENTS*/}
<label>Ingredients</label>
<br/>
<textarea
placeholder="Please list ingredients here."
name="ingredients"
type="textarea"
rows="10"
cols="30"
onChange={this.props.handleIngredients}
/>
<br/>
<br/>
{/*DIRECTIONS*/}
<label>Directions</label>
<br/>
<textarea
placeholder="Please list directions here."
name="directions"
type="textarea"
rows="10"
cols="30"
onChange={this.props.handleDirections}
/>
<br/>
<br/>
{/*SUBMIT*/}
<input type="submit" value="Submit"/>
</form>
</div>
)
}
}
export default Add;

Answer 1

Add组件依赖于以下形式的数据：

{
name: "",
time: "",
ingredients: [],
directions: []
}

在父组件，在本例中为Browse，您希望显示配方列表。对于要显示的每个配方，都需要一个以上表单中的新数据对象。在Browse中，您可以定义表示每个配方的对象数组。一旦在数组中定义了这些配方，您就可以在它们上进行映射，并为每个配方渲染具有相应数据的Add组件。然后，只在<div id='container' />中渲染Browse组件。

为了保持编辑这些配方的所有方面的能力，您需要在Browse组件中定义更改处理程序，并将它们作为props传递给Add组件。之所以需要在Browse中定义它们，是因为Browse保存配方列表的状态，并且每当发生更改时，您都需要在Browse中更新该列表的状态。"name"应该是每个配方的唯一标识符，否则需要另一个属性。

Answer 2

因此，在添加的子组件中，您必须传递name、time和ingrideint，以便在父组件中访问它们。变更处理程序也必须作为道具传递下去。

<Add
name = {this.state.name}
time ={this.state.time} 
ingredients={this.state.ingrdients}
directions={this.state.directions}/>

因为入口和方向是一个数组，你必须使用地图来获取所有数据，所以你应该做这样的

{this.props.indgridents.map( ( ingrident, index ) => {
return <p key={ `ingridient-${ index }` }>{ ingrideitn }</p>;
})}