Question

我有这个反应代码，我不知道如何做得更好。

我将这样开始。

到目前为止，我有3个react组件，即Main，Form，NextButton

所以我的Main组件看起来像这样：

import React, { Component } from "react";
import Form from "./Form"; 
import NextButton from "./NextButton";

class Main extends Component {
  render() {
    return (
      <div>
        <Form />
        <NextButton />
      </div>
    );
  }
}

export default Main;

Form包含一些文本字段First Name，Last Name，Age

NextButton组件包含一个react-bootstrap Button，仅用react-router-dom导航到下一页，没什么好想的。

我的问题是：

当我通过First Name单击NextButton时，我想将props的值传递给渲染的页面

所以NextButton看起来像这样：

<NextButton firstname={value-i-get-from-Form-component}/>

我知道react仅允许单向数据传递，但是我想使其工作。意思是如果我在Main组件中的当前设置不正确，该如何更改？

Answer 1

当Form输入更改时，可以通过调用prop函数来将数据从Main传递到First Name。

主要组件：

import React, { Component } from "react";
import Form from "./Form"; 
import NextButton from "./NextButton";

class Main extends Component {

  constructor(props) { 
    super(props)

    this.handleChange = this.handleChange.bind(this)

    this.state = {
      formValue: {}
    }
  }

  handleChange(formValue) {
    this.setState(formValue)
  }

  render() {
    return (
      <div>
        <Form onChange={this.handleChange} value={this.state.formValue} />
        <NextButton firstName={this.state.formValue.firstName} />
      </div>
    );
  }
}

export default Main;

表单组件可以是：

import React, { Component } from "react";

class Form extends Component {

  constructor(props) { 
    super(props)

    this.handleFirstNameChange = this.handleFirstNameChange.bind(this)
    this.handleLastNameChange = this.handleLastNameChange.bind(this)
    this.handleAgeChange = this.handleAgeChange.bind(this)
  }

  handleFirstNameChange(event) {
    if (this.props.onChange) {
      this.props.onChange({
        ...this.props.value,  // keep the other values like lastName, age
        firstName: event.target.value, 
      })
    }
  }

  handleLastNameChange(event) {
    if (this.props.onChange) {
      this.props.onChange({
        ...this.props.value,  // keep the other values like firstName, age
        lastName: event.target.value, 
      })
    }
  }

  handleAgeChange(event) {
    if (this.props.onChange) {
      this.props.onChange({
        ...this.props.value,  // keep the other values like firstName, lastName
        age: event.target.value, 
      })
    }
  }


  render() {
    let { firstName, lastName, age } = this.props.value
    return (
      <form>
        <input type="text" value={firstName} onChange={this.handleFirstNameChange} />
        <input type="text" value={lastName} onChange={this.handleLastNameChange} />
        <input type="text" value={age} onChange={this.handleAgeChange} />
      </form>
    );
  }
}

export default Form;

如果组件层次结构变得复杂，则可以使用Redux。

Answer 2

使用功能组件，您可以将状态保留在父级中，并将挂钩传递给子级，然后子级可以更新父级。您还可以将处理程序传递给孩子，并使用它来更新父项。

具有功能组件，它可能看起来像这样：

function Main(props) {
   
   const [firstName, setFirstName] = React.useState('');

   return (
     <div>
       <Form setFirstName={setFirstName} firstName={firstName} />
       <NextButton firstName={firstName} />
     </div>
   );
}

在内部表单中，您可以像这样更新状态

function Form({ firstName, setFirstName }) {

   const handleChange = (event) => {
      setFirstName(event.target.value)
   }
   
   return (
     <div>
       <TextField onChange={handleChange} value={firstName} />
     </div>
   );
}

这将在父级中呈现该新状态，并将其传递给NextButton。

Answer 3

如果这是我，我将熟悉使用react功能组件和挂钩，因为它们比redux更容易理解和理解。它们非常强大，当您编写自己的钩子时，您可以在各个组件之间以非常简单的方式共享逻辑。

React Hooks

function Main() {
  const [title, setTitle] = React.useState(undefined);
  return (
    <div>
      <Form onChange={setTitle} />
      <NextButton title={title} />
    </div>
  );
}

function Form({ onChange }) {
  const [value, setValue] = React.useState("");
  const change = event => {
    setValue(event.target.value);
  };

  return (
    <form
      onSubmit={e => {
        onChange(value);
        e.preventDefault();
      }}
    >
      <input onChange={change} type="text" value={value} />
      <button type="submit">Submit</button>
    </form>
  );
}

function NextButton({ title = "Title" }) {
  return <button>{title}</button>;
}
ReactDOM.render(<Main />, document.getElementById('app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

React JS如何将道具从一个组件传递到另一个组件

3 个答案: