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

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;

标签： reactjs

Answer 1

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

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

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

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