[React] React Fundamentals: with-addons - ReactLink
React with Fundamentals
2023-09-14 09:00:55 时间
It can be tedious to type out all the boilerplate needed to get the DOM and states in React to synchronize. Luckily, React provides a version of the toolkit with a selection of available addons. This lesson is going to dig into ReactLink, and how this addon can give you two-way binding.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React Lesson 15: dynamically create componenets</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script> <style> body { margin: 25px; } </style> </head> <body> <div id="panel"></div> <script type="text/jsx"> /** @jsx React.DOM */ var App = React.createClass({ getInitialState:function(){ return { name: '', email: '' } }, update: function () { this.setState({ name: this.refs.name.getDOMNode().value, email: this.refs.email.getDOMNode().value }) }, render:function(){ return ( <form> <div> <input type="text" ref="name" onChange={this.update} placeholder="Name"/> <label>*{this.state.name}*</label> </div> <div> <input type="text" ref="email" onChange={this.update} placeholder="Email"/> <label>*{this.state.email}*</label> </div> </form> ); } }); React.render(<App />, document.getElementById('panel')); </script> </body> </html>
Use addon: ReactLink
1. include the script:
script src="https://fb.me/react-with-addons-0.13.3.js"></script>
2. Add mixin:
mixins: [React.addons.LinkedStateMixin],
3. Use valueLink={this.linkState('name')} instead of 'ref' and 'onChange':
<input valueLink={this.linkState('name')} type="text" placeholder="Name" />
Code:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React Lesson 15: dynamically create componenets</title> <script src="https://fb.me/react-with-addons-0.13.3.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script> <style> body { margin: 25px; } </style> </head> <body> <div id="panel"></div> <script type="text/jsx"> /** @jsx React.DOM */ var App = React.createClass({ mixins: [React.addons.LinkedStateMixin], getInitialState:function(){ return { name: '', email: '' } }, render:function(){ return ( <form> <div> <input valueLink={this.linkState('name')} type="text" placeholder="Name" /> <label>*{this.state.name}*</label> </div> <div> <input valueLink={this.linkState('email')} type="text" placeholder="Email" /> <label>*{this.state.email}*</label> </div> </form> ); } }); React.render(<App />, document.getElementById('panel')); </script> </body> </html>
相关文章
- React Error: Failed at the xxx@0.1.0 start script 'react-scripts start'.
- React 开发 | 父子组件间通信
- React路由
- React 中非受控和受控的组件
- react基础使用
- 字节前端面试被问到的react问题
- 腾讯前端二面常考react面试题总结
- 使用react修改ant design默认样式|自定义
- react源码解析--源码目录结构和调试
- 从react源码角度看React-Hydrate原理
- 前端一面必会react面试题(附答案)
- react源码分析:深度理解React.Context
- 校招前端二面常考react面试题(边面边更)
- react踩坑笔记
- React学习笔记(三)—— 组件高级
- React 许可证虽严苛,但不必过度 react
- 语句Oracle中简洁的With语句(oracle 中with)
- 分析学习Oracle深入理解使用With 分析(oracle使用with)