时间戳

首页 > 解决方案 > 如何在 React JS 中的另一个函数中从一个函数中分配一个变量的值

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

问题描述

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 中实现这一点？

标签： reactjs

解决方案

使用状态怎么样！！

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

快乐编码！！！希望这可以帮助。

推荐阅读