首页 > 怎么获取组件中的input的值

怎么获取组件中的input的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/React/react.js"></script>
    <script src="../static/React/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<h1 onclick="ss(this)">click</h1>
<script type="text/babel">
  var Hst = React.createClass({
      handleClick:function () {
        this.refs.myTextInput.focus();
      },
      render:function () {
          return (<div>
              <input type="text" ref="myTextInput" value="" id="sss"/>
              <input type="button" value="please the input" onclick={this.handleClick}/>
          </div>)
      }
  });
    ReactDOM.render(
            <Hst/>,
            document.getElementById('example')
    )
</script>
<script>
    var ss = function (o) {
      o.innerHTML=document.getElementById("#sss").value;
    }
</script>
</body>
</html>

我想把ID="SSS"的input值输出来,但是这样不行


要操作实际的dom,可以在componentDidMount里面写你的代码...


如果是 controlled input,那么可以把 value 放在 state 里面,然后传给 input,在 input 上定义 onChange 来修改 state。好好看看官方文档吧。


refs 取 value


<Input ref = 'nameInput' />

onSaveEvent(){

var input = React.findDOM(this.refs.nameInput);
var inputValue = input.value;

}

大概的伪代码就是这样。这样处理同级别的子组件可以使用引用的方式来引用同级别组件。要记得这里的组件必须先封装成React组件才可以使用引用。‘Input’这里是封装‘input’的


没有#

o.innerHTML=document.getElementById("sss").value;
【热门文章】
【热门文章】