Question

我正在尝试在React中创建一个多页表单，并且已经设置了基本的线框。我正在尝试将用户名从一个页面导出到下一个页面，但是该用户将根据登录的用户而改变。我去过Google炼狱一段时间了，试图弄清楚如何获取基于状态的特定值组件的另一页上可用。在下面的代码中，我将导出整个组件以呈现在App.js页面上。但是，我也只想抓取{userName}以便在另一个组件中进行渲染。

import React, { Component } from 'react'

class Intro extends Component {
    state = { userName: ''}

    handleChange = (event) => this.setState({ userName: event.target.value })


    render() {
        const { userName } = this.state

        return (
            <div id='intro'>
                <form>
                    <FieldGroup
                        id='nameArea'
                        value={this.state.value}
                        onChange={this.handleChange}

                    />

                    <input id='submit' type='submit' value='Submit' /> . 
                  </form>
            </div>
        )
    }
}

export default Intro

Answer 1

简单地说，您不能。这就是redux之类的工具发挥作用的地方。这是使用React新的context API的示例：

const UserContext = React.createContext('');

class Intro extends Component {

  handleChange = (event) => {
    this.props.updateUserName(event.target.value);
  }


  render() {
    const { userName } = this.props

    return (
      <div id='intro'>
        <form>
          <input
            id='nameArea'
            value={userName}
            onChange={this.handleChange}
          />

          <input id='submit' type='submit' value='Submit' /> .
                  </form>
      </div>
    )
  }
}

// only doing this to shield end-users from the
// implementation detail of "context"
const UserConsumer = UserContext.Consumer

class App extends React.Component {
  state = { userName: '' }

  render() {
    return (
      <UserContext.Provider value={this.state.userName}>
        <React.Fragment>
          <Intro userName={this.state.userName} updateUserName={(userName) => this.setState({userName})} />
          <UserConsumer>
            {user => <div>Username: {JSON.stringify(user)}</div>}
          </UserConsumer>
        </React.Fragment>
      </UserContext.Provider>
    )
  }
}

请参阅我更新的密码和框here。

Answer 2

大多数时候，当您需要另一个组件上的数据时，解决方案是将日期存储在组件中较高的位置。

Answer 3

正如其他人已经说过的那样，最简单的方法是尝试通过道具将状态从高阶组件传递给孩子。另一种方法是将Redux用于状态管理。这使您可以从任何组件访问一个全局状态存储。第三，您可以尝试使用react上下文api。

在React

3 个答案: