prop实例
<div id="app"></div><script src="bower_components/react/react.min.js"></script><script src="bower_components/react/react-dom.min.js"></script><script src="lib/babel-core/browser.min.js"></script><script type="text/babel"> var MessageBox = React.createClass({ getInitialState: function () { return { isVisible: true, titleMessage: '你好世界（来自state哦）', subMessages: [ '我会代码搬砖', '以及花式搬砖', '不说了，工头叫我回去搬砖了。。。。。' ] } }, render: function () { return ( <div> <h1>{this.state.titleMessage}</h1> <SubMessage messages={this.state.subMessages} /> </div> ) } }); var SubMessage = React.createClass({ propTypes: { messages: React.PropTypes.array.isRequired }, getDefaultProps: function () { return { messages: ['默认的子消息'] // 防止this.props.messages不存在 } }, render: function () { var msgs = []; this.props.messages.forEach(function (msg, index) { msgs.push( <p>码农说：{msg}</p> ); }); return ( <div>{msgs}</div> ) } }); var messageBox = ReactDOM.render( <MessageBox/>, document.getElementById('app') );</script>
表单监听事件（非常麻烦，下一段代码有替代的）
<div id="app"></div><script src="bower_components/react/react.min.js"></script><script src="bower_components/react/react-dom.min.js"></script><script src="lib/babel-core/browser.min.js"></script><script type="text/babel"> var FormApp = React.createClass({ getInitialState: function () { return { inputValue: 'input value', selectValue: 'A', radioValue: 'B', textareaValue: 'some text here' } }, // 监听表单值的改变 handleInput: function (e) { this.setState({ inputValue: e.target.value }); }, handleSelect: function (e) { this.setState({ selectValue: e.target.value }); }, handleSubmit: function (e) { e.preventDefault(); console.log('form submit'); console.log(e); }, render: function () { return ( <div> <form action="" onSubmit={this.handleSubmit}> <input type="text" value={this.state.inputValue} onChange={this.handleInput}/> <select name="" id="" value={this.state.selectValue} onChange={this.handleSelect}> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select> <br/> <p>radio button!</p> <input type="radio" name="goodRadio" value="A"/> <input type="radio" name="goodRadio" defaultChecked value="B"/> <input type="radio" name="goodRadio" value="C"/> <br/> <input type="checkbox" name="goodRadio" value="A"/> <input type="checkbox" name="goodRadio" value="B"/> <input type="checkbox" name="goodRadio" defaultChecked value="C"/> <br/> <textarea name="" id="" cols="30" rows="10" value={this.state.textareaValue}> </textarea> <button type="submit">提交</button> </form> </div> ) } }); var messageBox = ReactDOM.render( <FormApp/>, document.getElementById('app') );</script>
指向ref
var FormApp = React.createClass({ getInitialState: function () { return { inputValue: 'input value', selectValue: 'A', radioValue: 'B', checkboxValues: ['C'], textareaValue: 'some text here' } }, handleSubmit: function (e) { e.preventDefault(); console.log('form submit'); var formData = { input: this.refs.myInput.value, select: this.refs.mySelect.value, textarea: this.refs.myTextarea.value, radio: this.state.radioValue, check: this.state.checkboxValues }; console.log('the form result is: '); console.log(formData); }, handleRadio: function (e) { this.setState({ radioValue: e.target.value }); }, handleCheck: function (e) { var checkboxValues = this.state.checkboxValues.slice(); var newVal = e.target.value; var index = checkboxValues.indexOf(newVal); if(index == -1) { checkboxValues.push(newVal); } else { // 存在了删除掉 checkboxValues.splice(index, 1); } this.setState({ checkboxValues: checkboxValues }); }, render: function () { return ( <div> <form action="" onSubmit={this.handleSubmit}> <input ref="myInput" type="text" defaultValue={this.state.inputValue}/> 选项： <select name="" id="" defaultValue={this.state.selectValue} ref="mySelect"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select> <br/> <p>radio button!</p> <RadioButtons handleRadio={this.handleRadio} /> <br/> <CheckboxButtons handleCheck={this.handleCheck} /> <br/> <textarea name="" id="" cols="30" rows="10" defaultValue={this.state.textareaValue} ref="myTextarea"> </textarea> <button type="submit">提交</button> </form> </div> ) } }); var RadioButtons = React.createClass({ render: function () { return ( <div> A <input onChange={this.props.handleRadio} type="radio" name="goodRadio" value="A"/> B <input onChange={this.props.handleRadio} type="radio" name="goodRadio" defaultChecked value="B"/> C <input onChange={this.props.handleRadio} type="radio" name="goodRadio" value="C"/> </div> ); } }); var CheckboxButtons = React.createClass({ render: function () { return ( <div> A <input onChange={this.props.handleCheck} type="checkbox" name="A" value="A"/> B <input onChange={this.props.handleCheck} type="checkbox" name="B" value="B"/> C <input onChange={this.props.handleCheck} type="checkbox" name="C" defaultChecked value="C"/> </div> ) } }); var messageBox = ReactDOM.render( <FormApp/>, document.getElementById('app') );
