Передача данных из поля ввода в переменную без отправки

Question

Попытка заставить меня задуматься. Я хочу взять данные из поля ввода и передать его в переменную (let), чтобы затем передать ее обратно в html в отдельной строке. Будет ли это «двусторонним связыванием»? У кого-нибудь есть простой пример этой работы?

http://codepen.io/IanHazelton/pen/ygEomV?editors=0110

let name="{name from input}"; 
let age="{age from input}"; 

class App extends React.Component { 
    render() { 
    return (
     <div className ="wrap"> 
      <h1 className="string">What's your name?</h1> 
      <input type="text" id="name" /> 
      <h1 className="string">How old are you?</h1> 
      <input type="text" id="age" /> 
      <h1 className="string">Hi {name}! How are you today? You're {age} years old.</h1> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(<App/>, document.getElementById('Root')) 

Answer 1

Вы должны воспользоваться state компонента. Я изменил перо для работы с name собственности, вы можете сделать то же самое на другие входы:

class App extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     value: '' 
    }; 
    } 

    handleNameOnChange(e) { 
    this.setState({ 
     name: e.target.value 
    }); 
    } 

    render() { 
    return ( 
     <div className="wrap"> 
      <h1 className="string">What's your name?</h1> 
      <input type="text" id="name" value={this.state.name} onChange={ (e) => this.handleNameOnChange(e) } /> 
      <h1 className="string">How old are you?</h1> 
      <input type="text" id="age" /> 
      <h1 className="string">Hi {this.state.name}! How are you today? You're {age} years old.</h1> 
     </div> 
    ) 

    } 
} 

CodePen

Answer 2

Для этого вам нужно использовать state в App компонента, Концепция является всякий раз, когда пользователь предоставить какой-либо вход в fields, хранить эти значения в state переменной, и всякий раз, когда вы делаете какие-либо изменения в state значений, React будет render весь component снова, попробуйте это:

class App extends React.Component { 
    constructor(){ 
    super(); 
    this.state={name: '', age: ''} 
    } 
    render() { 
    return (
     <div className ="wrap"> 
      <h1 className="string">What's your name?</h1> 
      <input value={this.state.name} type="text" id="name" onChange={(e)=>{this.setState({name: e.target.value})}}/> 
      <h1 className="string">How old are you?</h1> 
      <input value={this.state.age} onChange={(e)=>{this.setState({age: e.target.value})}} type="text" id="age" /> 
      <h1 className="string">Hi {this.state.name}! How are you today? You're {this.state.age} years old.</h1> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(<App/>, document.getElementById('Root')) 

Проверьте рабочий пример: http://codepen.io/anon/pen/egKyvJ?editors=0110