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>
原文地址:https://www.cnblogs.com/461770539-qq/p/9390142.html
时间: 2024-10-07 12:16:17