Question

我有一个具有此代码的react类：

  getInitialState: function(){
    return {
      results: false,
      value: ''
    };
  },

  handleClick: function(event) {
    this.setState({ results: true });
    event.preventDefault();
  },

  handleChange: function(event){
    this.setState({value: event.target.value})
  },

    <input type="text" id="playerName" value={this.state.value} onChange={this.handleChange} placeholder="name" />

另一个反复的课程

我有：

myFunc: function() {
    this.setState({info: true})
    let name = this.props.value;
    console.log(name) --> returns undefined
  },

如何通过将用户从一个反应类传递到另一个反应类来将其命名为等于用户输入的名称

我可以发布更多代码，但我认为道具是传递其他地方所需代码的方式。 this.state.value也会返回undefined

编辑：

myFunc在这里调用：

<input type="submit" value="I can play" onClick={() => this.myFunc()}/>

Answer 1

最简单的方法是使用容器组件，此容器组件将处理所有状态管理并包装子组件：

<WrapperComponent>
 <Input/>
 <Info />
</WrapperComponent

如果您想要进行去抖动以及类似的事情，您的输入仍然可以有自己的状态，但是包装器组件将拥有自己的函数来设置自己的状态，并将这些函数传递给输入，以便输入可以调用它们它的新值然后包装器组件将更新，然后Info组件将从包装器组件接收它的值props，一切都将同步。

这是一个示例代码集http://codepen.io/finalfreq/pen/VKPXoN

class Wrapper extends React.Component {    
  constructor() {
  super();
    this.state = {
      value: 'default'
    }
  }

  _handleChange = (value) => {
    this.setState({value: value})  
  };

  render() {
    return (
      <div>
       <Input onChange={this._handleChange} value={this.state.value}/>
       <Info value={this.state.value} />
      </div>
    )
  }
}

class Input extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: props.value
    }
  }

  onChange = (e) => {
    this.setState({value: e.target.value});
    this.props.onChange(e.target.value);
  };

  render() {
    return <input type="text" value={this.state.value} onChange={this.onChange} />
  }
}

const Info = (props) => {
  return (
   <h1> {props.value} </h1>
  )
}


ReactDOM.render(<Wrapper />,document.getElementById('app'));

显然你可以轻松地将其转换为使用createClass版本而不必使用es6版本。这里的主要内容是，如果要在不直接相关的组件之间共享值，那么您肯定需要一个处理所有内容的状态容器组件。

这是一篇很棒的文章，介绍了容器与展示组件https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

传递输入状态反应

1 个答案: