首页 > 解决方案 > 将数据传回 React JS 中的组件

问题描述

我有2个组件,

成分:

在此,Launcher 组件首先被调用。从该按钮单击它路由到 Developer 组件。我想将一个值从 Developer 组件传回 Launcher 组件。

  class LauncherApp extends Component {
      constructor(props) {
        super(props);
        this.developerMode = this.developerMode.bind(this)
      }

    developerMode(){
        this.props.history.push('/dev') //routes to developer component
       }

    render() {
       return (
    <div>
             <List>
                <ListItem
                onClick={this.developerMode}>Developer<ListItem/>
             </List>
    </div>
     );
  }
      }

开发者.js

    class DeveloperMode extends Component {
          constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
               this.state = {
                  url:'Prod'
                };
          }

           handleChange(event) {
            this.setState({
              url: event.target.value
            });
          } 
            handleSubmit(event) {
            event.preventDefault();
            var env=this.state.url;
              this.props.signOut();
             }

render() {
      return(
        <div>
          <h3>Select Environment </h3>
        <RadioButtonGroup name="selectURL" defaultSelected="Prod"  onChange={this.handleChange}>
          <RadioButton
            value="Prod"
            label="Production"

          />
          <RadioButton
            value="Dev"
            label="Development"

          />
          <RadioButton
          value="Test"
          label="Testing"

        />
        </RadioButtonGroup>
        <RaisedButton label="Save" onClick={this.handleSubmit}/>
        </div>
      );
    }
        }

我想在组件启动器中获取 url 值。请帮我解决这个问题。

标签: reactjsreact-routerreact-props

解决方案


您可以使用这样的路由功能发送数据,

this.props.history.push({pathname:'/',url:this.state.url})

推荐阅读