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

Question

试图让我的头脑做出反应。我想从输入字段中获取数据并将其传递给变量 (let)，这样我就可以将它传递回单独字符串中的 html。这会是 'two way binding' 吗？有人有这个工作的简单例子吗？

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

为此，您需要在 App 组件中使用 state，概念是每当用户在 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

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

Pass data from input field into variable without submitting

jsx

reactjs