Reactjs 将数据从输入字段传递到变量，而不提交

试着让我的头脑清醒一下。我想从输入字段中获取数据并将其传递到变量（let）中，这样我就可以将其以单独的字符串形式传递回html。这是“双向绑定”吗？有没有人能举一个简单的例子来说明这一点

let name=“{name from input}”；
let age=“{age from input}”；
类应用程序扩展了React.Component{
render（）{
返回(
你叫什么名字？
你多大了？
嗨{name}！你今天好吗？你已经{age}岁了。
)
}
}
ReactDOM.render（，document.getElementById（'Root'））

您需要利用组件的

状态。我修改了您的笔以使用
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>
    )

  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”
};
}
handleNameOnChange（e）{
这是我的国家({
名称：e.target.value
});
}
render（）{
报税表（
你叫什么名字？
this.handleNameChange（e）}/>
你多大了？
你好{这个州。名字}！你今天好吗？你{岁}。
)
}
}

对于您需要使用应用程序组件中的
状态
，概念是每当用户在
字段
中提供任何输入时，将这些值存储在
状态
变量中，并且每当您对
状态
值进行任何更改时，
反应
将再次呈现整个
组件
，试试这个：

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'))

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={name:''，age:''}
}
render（）{
返回(
你叫什么名字？
{this.setState（{name:e.target.value}}}/>
你多大了？
{this.setState（{age:e.target.value}}}type=“text”id=“age”/
你好{这个州。名字}！你今天好吗？你{这个州。年龄}岁。
)
}
}
ReactDOM.render（
Works！感谢友好、信息丰富且有效的回复！Works！感谢友好、信息丰富且有效的回复！
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'))