如何在 REACT 中插入表单中的数据

Question

我是 React 的新手，我正在尝试使用表单组件中的数据并使用该数据调用另一个名为 Fruits 的组件中的函数。对于我所阅读的内容，我必须通过道具来完成，但实际上我很难做到。

我有一个水果列表，我希望用户能够插入他最喜欢的水果。我有 3 个组件 Form、Fruits、Fruit 和 App。我认为最好的方法是在 Fruits 组件中添加一个函数 addNewFruit()，但我不知道如何将 Form 组件中的数据（存储在 newFruit 中）发送到 Fruits 组件。

代码如下：

import React from "react";
import Fruits from "./Fruits";
import Form from "./Form";

function App() {
  return (
    <div className="App">
      <h1>List of fruits</h1>
      <p>enter your favourite fruit</p>
      <Form />
      <Fruits />
    </div>
  );
}

export default App;

表单组件

import React, { Component } from "react";

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      rating: "",
    };
  }
  handlerName = (event) => {
    console.log(event.target.value);
    this.setState({
      name: event.target.value,
    });
  };
  handlerRating = (event) => {
    console.log(event.target.value);
    this.setState({
      rating: event.target.value,
    });
  };
  handlerSubmit = (event) => {
    event.preventDefault();
    const newFruit = this.state;
  };
  render() {
    return (
      <div>
        <form onSubmit={this.handlerSubmit}>
          <input
            type="text"
            placeholder="name"
            value={this.state.name}
            onChange={this.handlerName}
          />
          <input
            type="number"
            placeholder="rating"
            value={this.state.rating}
            onChange={this.handlerRating}
          />
          <button type="submit">Submit fruit</button>
        </form>
      </div>
    );
  }
}

export default Form;

水果成分

import React, { Component } from "react";
import Fruit from "./Fruit";
class Fruits extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fruits: [
        { name: "Orange", rating: 6 },
        { name: "Banana", rating: 7 },
        { name: "Kiwi", rating: 9 },
      ],
    };
  }
  render() {
    const fruits = this.state.fruits.map((fruit) => (
      <Fruit name={fruit.name} rating={fruit.rating} />
    ));
    return fruits;
  }
}

export default Fruits;

水果

import React, { Component } from "react";

class Fruit extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <p>
        {" "}
        The name of the fruit is {this.props.name} and its rating is{" "}
        {this.props.rating}
      </p>
    );
  }
}

export default Fruit;

Answer 1

为了在 2 个兄弟组件之间共享数据，您需要在更高的组件中创建状态和数据处理函数。在这种情况下，App组件中应该有一个fruits状态和一个修改状态的函数。

App 组件中水果的状态作为展示的道具传递给 Fruits 组件。 App 组件中的函数作为 prop 传递给 Form 组件，用于处理 Form 组件中的新水果。

下面的 sn-p 展示了它是如何工作的。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fruits: [
        { name: "Orange", rating: 6 },
        { name: "Banana", rating: 7 },
        { name: "Kiwi", rating: 9 },
      ],
    }

    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }
  handleFormSubmit(newFruit) {
    const fruits = this.state.fruits;
    if (newFruit) {
      fruits.push(newFruit)
    }
    this.setState({
      fruits: fruits,
    })
  }
  render() {
    return (
      <div className="App">
        <h1>List of fruits</h1>
        <p>enter your favourite fruit</p>
        <Form formSubmit={this.handleFormSubmit}/>
        <Fruits fruits={this.state.fruits}/>
      </div>
    );
  }
}

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      rating: "",
    };
  }
  handlerName = (event) => {
    console.log(event.target.value);
    this.setState({
      name: event.target.value,
    });
  };
  handlerRating = (event) => {
    console.log(event.target.value);
    this.setState({
      rating: event.target.value,
    });
  };
  handlerSubmit = (event) => {
    event.preventDefault();
    const newFruit = this.state;
    this.props.formSubmit(newFruit);
  };
  render() {
    return (
      <div>
        <form onSubmit={this.handlerSubmit}>
          <input
            type="text"
            placeholder="name"
            value={this.state.name}
            onChange={this.handlerName}
          />
          <input
            type="number"
            placeholder="rating"
            value={this.state.rating}
            onChange={this.handlerRating}
          />
          <button type="submit">Submit fruit</button>
        </form>
      </div>
    );
  }
}

class Fruits extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const fruits = this.props.fruits.map((fruit) => (
      <Fruit name={fruit.name} rating={fruit.rating} />
    ));
    return fruits;
  }
}

class Fruit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <p>
        {" "}
        The name of the fruit is {this.props.name} and its rating is{" "}
        {this.props.rating}
      </p>
    );
  }
}

const container = document.querySelector('#root');
ReactDOM.render(<App />, container);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>