Question

class App extends React.Component  {
  constructor (props) {
    super(props);
    this.state ={val:'test'}
  }

  change(e){
    let valueOfInput = e.target.value;
  }
  submit(ev){
    ev.preventDefault();
    alert(valueOfInput)
  }
  render() {
    return(
      <div>
        <form action="">
          <input onChange={this.change.bind(this)} type="text" value={this.state.val}/>
          <input onClick={this.submit.bind(this)} type="submit"  value='submit'/>
        </form>
      </div>

    )
  }
}
ReactDOM.render(
<App />,
document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="root"> </div>

使用此代码，我想从alert函数发送sumbit()中的输入值。因此，我想从输入中获取值，将其保存在变量valueOfInput中，然后再从submit函数以警报方式发送该值。如何在ReactJs中实现呢？

Answer 1

如何使用状态！

setState()使更改进入组件状态，并告诉React该组件及其子组件需要使用更新后的状态重新呈现。这是用于响应事件处理程序和服务器响应而更新用户界面的主要方法。

class App extends React.Component  {
  constructor (props) {
    super(props);
    this.state ={valueOfInput:''}
  }
  change(e){
    valueOfInput = e.target.value;
    this.setState({valueOfInput});
  }
  submit(ev){
    ev.preventDefault();
    alert(this.state.valueOfInput)
  }
  render() {
    return(
      <div>
        <form action="">
          <input onChange={this.change.bind(this)} type="text" value={this.state.valueOfInput}/>
          <input onClick={this.submit.bind(this)} type="submit"  value='submit'/>
        </form>
      </div>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

编码愉快！！！希望这会有所帮助。

Answer 2

通过使用 this 将其声明为类级别，可以将输入的值存储在 valueOfInput 变量中。

constructor(props) {
super(props);
this.state = { val: "test" };
this.valueOfInput = null;
  }


change(e) {
    this.valueOfInput = e.target.value;
  }
  submit(ev) {
    ev.preventDefault();
    alert(this.valueOfInput);
  }

但是，由于我们没有用新值更新输入值，因此它无法按预期工作。因此，要解决此问题，我们必须将新的输入值存储到状态中并在输入中使用该值。

change(e) {
this.valueOfInput = e.target.value;
this.setState({
  val: e.target.value
});

}

Answer 3

您的valueOfInput似乎是在其change()的块空间中定义的，在类状态下声明该变量，您应该能够在submit()回调中引用它。

class App extends React.Component  {
  constructor (props) {
    super(props);
    this.state = {
     valueOfInput: null,
    }
  }

  change(e){
    this.setState({
      valueOfInput: e.target.value,
  val:e.target.value

    });
  }
  submit(ev){
    ev.preventDefault();
    alert(this.state.valueOfInput)
  }
  render() {
    return(
      <div>
        <form action="">
          <input onChange={this.change.bind(this)} type="text" value={this.state.valueOfInput}/>
          <input onClick={this.submit.bind(this)} type="submit"  value='submit'/>
        </form>
      </div>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

如何在React JS中从另一个函数中的一个函数分配变量的值

3 个答案: