在 React 的不同组件中呈现用户输入答案

【问题标题】：Render user input in a different component in React在 React 的不同组件中呈现用户输入
【发布时间】：2020-05-21 15:54:38
【问题描述】：

我目前正在一个 div 中呈现用户输入，与我的表单在同一个组件中。我想在另一个页面（在我的另一个组件中）上呈现用户输入。如何在我的应用的不同组件中呈现用户输入？

应用结构： App.js（反应路由器的导航设置） 3 个组件：Home.js、ProjectIdeas.js 和 Projects.js Planning.js（包含我的表单并当前呈现用户输入的组件）是 Projects.js 的子级。 Projects.js 是我想要呈现用户输入的地方。

Planning.js

   constructor() {
     super()
     this.state = { 
       title: '',
       features: '',
      details: ''
        }

     this.handleChange = this.handleChange.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
   }

handleChange(event) {

this.setState({ 
  [event.target.name]: event.target.value 
})
}

handleSubmit(event) {
    const {
      title,
       features,
      details
    } = this.state;
    event.preventDefault();
    this.setState({ title, features, details });
}

    render() {
      return (
        <form onSubmit={this.handleSubmit}>
 <div>{this.state.title}</div>
        <div>
          <label className="label-title">
            Project Title:</label>
            <input name="title" id="title" type="text" onChange={this.handleChange}/>
            </div>
        <div>
      <label className="label-features">
      Features:</label>
      <input name="features" placeholder="Button (directs to contact page), black footer" id="features" type="text" onChange={this.handleChange}/>
      </div>
      <div>
    <label className="label-details">
    Other details: </label>
    <input name="details" placeholder="Other Details" id="details" type="text" onChange={this.handleChange}/>
    </div>
          <input class="submit" type="submit" value="Save plan" />
        </form>
      )
    }
  }

Projects.js

class Projects extends React.Component {
    constructor(props) {
        super(props)
        this.state = { isEmptyState: true }
      }

      triggerAddPlanState = () => {
        this.setState({
          ...this.state,
          isEmptyState: false,
          isAddPlanState: true
        })
      }

    render() {
        return (
            <div>
            {this.state.isEmptyState && <AddPlanButton addPlan={this.triggerAddPlanState} />}

            {this.state.isAddPlanState && <Planning />}
            </div>

        )
    }
}

【问题讨论】：

您的意思是要在另一个组件中呈现完全相同的表单？
不，我想在另一个组件中呈现用户输入 (<div>{this.state.title}</div>)，而不是在与表单相同的组件中呈现它。我需要在其他组件中设置状态吗？ @goto1
您不需要在另一个组件中设置状态，因为这将是复制状态（在您的父组件和子组件中）。相反，您可以将title、features、details 作为props 传递给您的子组件。如果我们能看到您如何构建应用程序中的组件，这将有助于我们回答。
您应该看看这个 - reactjs.org/docs/lifting-state-up.html 或按照 @khuynh 的建议，查看 Context API 和/或 Redux 以在多个组件之间共享状态。
我已经更新了我的问题，以展示我是如何构建组件的。是否可以在不使用上下文或 redux 的情况下将输入传递给其他组件？ @khuynh

标签： reactjs

【解决方案1】：

您需要将值存储在组件外部，可以是公共父组件，也可以是正交的某个地方。

如果组件共享附近的父组件，您可以让父组件跟踪状态并将其作为道具传递给两者：

function ParentComponent () {
  const [value, setValue] = React.useState();

  <ComponentA value={value} onChange={v => setValue(v)} />
  <ComponentB value={value} onChange={v => setValue(v)} />
}

如果您的应用不适合上述解决方案，还有许多其他方法可以做到这一点。我建议您考虑使用Redux 之类的商店，或者可能查看React Context。（您的场景似乎不能很好地利用上下文，但您可以让它发挥作用。）

实现自己的商店并不是特别复杂。 Here's an example 的一种方法。

【讨论】：