传递输入状态各地的反应

我有了这个代码，反应类：传递输入状态各地的反应

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" />

在相互反应CLASS

我：

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()}/>

来源

2016-11-10 The worm

您需要绑定'this'在'handleChange'方法明确地这样'this.handleChange.bind（本）'。试试这个，是的，发布更多的代码，如果它仍然不起作用，可能会尝试Codepen把你的整个代码。 –

@BasimHennawi不，没有'createClass'。如果OP使用'class'的反应组件，那将会是一个问题。 –

如何设置this.props.value？你可以显示使用'myFunc'的组件吗？ –

对于这项工作的最简单的方法是有一个容器组件，该容器组件将所有的状态管理和环绕子组件：

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

如果你想要做反弹但是你的输入仍然可以有它自己的状态但是包装部件将拥有自己的函数设置自己的状态，并且下来通过这些功能来输入，使输入可以与新的价值观打电话给他们，然后将包装组件将更新后的信息组件将接收其值道具包装组件和一切都会同步。

这里是codepen 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版本是一个例子。这里主要的地方是，如果你想跨不直接相关的组件共享值，那么你肯定会想要一个处理所有事情的状态容器组件。

这里是一个伟大的文章去在容器VS表象的成分https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

来源

2016-11-10 17:27:01 finalfreq

很好的答案。很好，你深入 –

我想我得到这个。但问题是，只要我输入它，就在屏幕上设置值。即在我编辑文本框时在代码笔上显示它。我想更多的东西一样，用户输入一个数的值在文本框中，他们点击提交，然后我可以调用的代码提交值等地.. –

这是否有意义？ –

传递输入状态各地的反应

回答

相关问题