Fatal编程技术网
  • reactjs/
  • Reactjs 反应：我想将添加组件表单输入发送到浏览组件以供查看

Reactjs 反应：我想将添加组件表单输入发送到浏览组件以供查看

reactjs

Reactjs 反应：我想将添加组件表单输入发送到浏览组件以供查看,reactjs,Reactjs,非常感谢@spakmad和@Leon Bogod的快速回复，肯定取得了一些进展 但是，当我输入信息时，它会实时显示，然后当我单击“提交”时，它就会消失。我不介意这些信息出现在现场，但我希望它能保存下来，这样我可以在将来添加更多 浏览（父）组件： import React, { Component } from 'react'; import Add from "./Add"; class Browse extends Component { constructor(props){ s

非常感谢@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;

import React，{Component}来自'React'；
从“/Add”导入Add；
类浏览扩展组件{
建造师（道具）{
超级（道具）；
此.state={
姓名：“，
时间：“，
成分：[]，
说明：[]
};
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.target.value
});
}
手艺（活动）{
这是我的国家({
时间：event.target.value
});
}
handleIngredientsChange（活动）{
这是我的国家({
成分：事件、目标、价值
});
}
处理方向更改（事件）{
这是我的国家({
方向：event.target.value
});
}
render（）{
返回(
{this.state.name}
{this.state.time}
{this.state.components}
{this.state.directions}
)
}
}
导出默认浏览；
浏览（子）组件：

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;

import React，{Component}来自'React'；
从“/App”导入浏览；
导入“/Add.css”；
类Add扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
添加


{/*名称*/}




{/*时间*/}
配方的持续时间


挑选
不到一小时
1至2小时
2至3小时
3小时或以上




{/*成分*/}
成分






{/*方向*/}
方向






{/*提交*/}
)
}
}
导出默认添加；
添加组件取决于以下形式的数据：

{
 name: "",
 time: "",
 ingredients: [],
 directions: []
}
在父组件上，在本例中为“浏览”，您希望显示配方列表。对于要显示的每个配方，都需要一个新的数据对象，格式如下。在
Browse
中，可以定义表示每个配方的对象数组。一旦在数组中定义了这些配方，您就可以在它们上面进行映射，并为每个配方渲染一个带有相应数据的
添加
组件。然后，仅在
中渲染
浏览
组件


要保持编辑这些配方的所有方面的能力，您需要在
浏览
组件中定义更改处理程序，并将它们作为
道具
传递给
添加
组件。需要在
Browse
中定义它们的原因是
Browse
保存配方列表的状态，并且每当发生更改时，您需要在
Browse
中更新该列表的状态<代码>“名称”
应该是每个配方的唯一标识符，或者为此需要另一个属性。
因此，在添加的子组件中，您必须传递名称、时间和InGridInents，以便可以在父组件中访问它们。此外，更改处理程序必须作为道具传递


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






因为ingreidents和directions是一个数组，所以您必须使用map来获取所有数据，所以您应该这样做


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



{this.props.indgridents.map（（ingrident，index）=>{
return
{ingrideitn}
；
})}