Передача реквизита/состояния в/из родительского компонента

Question

Итак, у меня есть родительский компонент и компонент регистрации.

Я хочу, чтобы пользователь ввел свои данные, а затем ударил submit, а затем сохранил/передал эти детали, чтобы они могли использоваться другими компонентами.

Как это лучше всего сделать в реактиве?

, например, у меня есть это поле ввода в моем журнале в компоненте

<p> 
    <input type="text" id="playerName" value={this.props.nameValue} onChange={this.props.handleNameChange}/> 
</p> 

Затем я хочу передать значение, которое вводится в качестве родительского компонента

У меня есть эта функция в моем родительском компоненте:

handleNameChange(event){ 
    this.setState({nameValue: event.target.value}) 
    }; 

и в моем возвращении у меня есть:

return (
     <div> 
     <LoginPage handleClick={this.handleClick.bind(this)} handleNameChange={this.handleNameChange.bind(this)}/> 
     </div> 
    ) 

Однако, когда я console.log (nameValue), я получаю undefined. есть идеи? при необходимости может добавить дополнительный код

Answer 1

Из вашего примера вы никогда не проходят nameValue компоненту ребенка.

Обновленный ваш пример визуализации LoginPage, передавая this.state.nameValue в компонент ребенка с помощью реквизита:

return (
    <div> 
    <LoginPage 
     handleClick={this.handleClick.bind(this)} 
     handleNameChange={this.handleNameChange.bind(this)} 
     nameValue={this.state.nameValue} 
    /> 
    </div> 
) 

Answer 2

Ваш подход с использованием состояния и реквизита в порядке. Вы уверены, что вы не должны быть просто используя ...

console.log(this.state.nameValue); 

Это рабочий пример

class Parent extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      nameValue:'' 
     }; 
    } 
    render() { 
     return (
      <Child handleClick={this.handleClick.bind(this)} handleNameChange={this.handleNameChange.bind(this)} nameValue={this.state.nameValue} /> 
     ); 
    } 
    handleNameChange(e) { 
     this.setState({ 
      nameValue: e.target.value 
     }); 
    } 
    handleClick() { 
     alert(this.state.nameValue); 
    } 
} 

class Child extends React.Component { 
    render() { 
    return (
     <div> 
      <input type="text" value={this.props.nameValue} onChange={this.props.handleNameChange} /> 
      <button onClick={this.props.handleClick}>Click Me!</button> 
     </div> 
    ); 
    } 
} 

JSFiddle here.