Переходя входное состояние вокруг в реакции

Question

У меня есть реагировать класс, который имеет следующий код:

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 также возвращает неопределенное

редактировать:

MyFunc здесь называют:

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

Answer 1

Самым простым способом для этого, чтобы работать, чтобы иметь компонент контейнера, этот контейнер компонент будет обрабатывать все государственное управление и обернуть вокруг детские компоненты:

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

У вашего входа все еще может быть свое собственное состояние, если вы хотите сделать debussing и что-то вроде этого компонент-оболочка будет иметь свои собственные функции, которые устанавливают свое собственное состояние и передают эти функции до ввода, так что вход может вызывать их с новыми значениями, а затем компонент-оболочка будет обновляться, а затем компонент Info получит свои реквизиты значения из обертки, и все будет синхронизироваться.

вот пример 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 версию. Главная причина заключается в том, что если вы хотите делиться значениями между компонентами, которые напрямую не связаны, вам определенно понадобится компонент контейнера состояния, который обрабатывает все.

Вот большая статья собирается над контейнером против презентационных компонентов https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0