React 中双项绑定
Posted 461770539-qq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React 中双项绑定相关的知识，希望对你有一定的参考价值。
React 中双项绑定,文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React--表单双项绑定</title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="build/browser.min.js"></script> </head> <body> <div id="app"></div> </body> </html> <script type="text/babel"> // 文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数， // 文本框在react中不能使用，传统的获取方法。使用事件源 event.target.value let Hello = React.createClass({ // 创建组件类 // 设置state的初始值 getInitialState(){ return{ name:"Hello world!", } }, // 通过 event.target.value 读取用户输入的值 fn(ev){ this.setState({ title:ev.target.value }) }, render() { return( // 写在return中的是模板 用jsx语法 // 模板中只有一个顶层标签 注释不能写在jsx语法中 <div> <input type="text" onChange={this.fn}/> <p>{this.state.title}</p> </div> ) } }); // 渲染到页面 ReactDOM.render(<Hello name="zhangsan" url="http://www.baidu.com"> </Hello>,document.getElementById("app")); </script>
以上是关于React 中双项绑定的主要内容，如果未能解决你的问题，请参考以下文章