React组件 API- 组件生命周期- AJAX-表单与事件资料大全视频React组件 API- 组件生命周期- AJAX-表单与事件资料大全视频科技离不开数字百家号React 组件 API 视频地址：www.fanluwang.top在本章节中我们将讨论 React 组件 API。我们将讲解以下7个方法:设置状态：setState替换状态：replaceState设置属性：setProps替换属性：replaceProps强制更新：forceUpdate获取DOM节点：findDOMNode判断组件挂载状态：isMounted设置状态:setStatesetState(object nextState[, function callback])参数说明nextState，将要设置的新状态，该状态会和当前的state合并callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。关于setState不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。实例React 实例varCounter = React.createClass({getInitialState: function(){return{clickCount: 0}; }, handleClick: function(){this.setState(function(state){return{clickCount: state.clickCount + 1}; }); }, render: function(){return(点我！点击次数为: {this.state.clickCount}); }});ReactDOM.render( , document.getElementById('message'));尝试一下 实例中通过点击 h2 标签来使得点击计数器加 1。替换状态：replaceStatereplaceState(object nextState[, function callback])nextState，将要设置的新状态，该状态会替换当前的state。callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。设置属性：setPropssetProps(object nextProps[, function callback])nextProps，将要设置的新属性，该状态会和当前的props合并callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。设置组件属性，并重新渲染组件。props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。替换属性：replacePropsreplaceProps(object nextProps[, function callback])nextProps，将要设置的新属性，该属性会替换当前的props。callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。replaceProps()方法与setProps类似，但它会删除原有 props。强制更新：forceUpdateforceUpdate([function callback])参数说明callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。获取DOM节点：findDOMNodeDOMElement findDOMNode()返回值：DOM元素DOMElement如果组件已经挂载到DOM中，该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时，this.findDOMNode()也会返回null。从DOM 中读取值的时候，该方法很有用，如：获取表单字段的值和做一些 DOM 操作。判断组件挂载状态：isMountedbool isMounted()返回值：true或false，表示组件是否已挂载到DOM中isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。React 组件生命周期在本章节中我们将讨论 React 组件的生命周期。组件的生命周期可分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOM生命周期的方法有：componentWillMount 在渲染前调用,在客户端也在服务端。componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。这些方法的详细说明，可以参考官方文档。以下实例在 Hello 组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒重新设置组件的透明度，并重新渲染：React 实例varHello = React.createClass({getInitialState: function(){return{opacity: 1.0}; },
componentDidMount: function(){this.timer = setInterval(function(){varopacity = this.state. opacity -= .05; if(opacity
Hello{this.props.name}
); }}); ReactDOM.render( , document.body);尝试一下 以下实例初始化 state ， setNewnumber 用于更新 state。所有生命周期在 Content 组件中。React 实例varButton = React.createClass({getInitialState: function(){return{data:0}; }, setNewNumber: function(){this.setState({data: this.state.data + 1})}, render: function(){return( &div& &buttononClick = {this.setNewNumber}&INCREMENT&/button& &ContentmyNumber = {this.state.data}&&/Content& &/div& ); }})varContent = React.createClass({componentWillMount:function(){console.log('Component WILL MOUNT!')}, componentDidMount:function(){console.log('Component DID MOUNT!')}, componentWillReceiveProps:function(newProps){console.log('Component WILL RECEIVE PROPS!')}, shouldComponentUpdate:function(newProps, newState){ }, componentWillUpdate:function(nextProps, nextState){console.log('Component WILL UPDATE!'); }, componentDidUpdate:function(prevProps, prevState){console.log('Component DID UPDATE!')}, componentWillUnmount:function(){console.log('Component WILL UNMOUNT!')},
render: function(){return( &div& &h3&{this.props.myNumber}&/h3& &/div& ); }});ReactDOM.render( &div& &Button /& &/div&, document.getElementById('example'));React AJAXReact 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。以下实例演示了获取 Github 用户最新 gist 共享描述:React 实例varUserGist = React.createClass({getInitialState: function(){return{username: '', lastGistUrl: ''}; },
componentDidMount: function(){this.serverRequest = $.get(this.props.source, function(result){varlastGist = result[0]; this.setState({username: lastGist.owner.login, lastGistUrl: lastGist.html_url}); }.bind(this)); },
componentWillUnmount: function(){this.serverRequest.abort(); },
render: function(){return( {this.state.username} 用户最新的 Gist 共享地址： {this.state.lastGistUrl} ); }}); ReactDOM.render( , mountNode);React 表单与事件本章节我们将讨论如何在 React 中使用表单。一个简单的实例在实例中我们设置了输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化，并修改 state。React 实例varHelloMessage = React.createClass({getInitialState: function(){return{value: 'Hello Runoob!'}; }, handleChange: function(event){this.setState({value: event.target.value}); }, render: function(){varvalue = this.state. return {value}; }});ReactDOM.render( , document.getElementById('example'));尝试一下 上面的代码将渲染出一个值为 Hello Runoob! 的 input 元素，并通过 onChange 事件响应更新用户输入的值。实例 2在以下实例中我们将为大家演示如何在子组件上使用表单。 onChange 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来重新渲染界面。你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。React 实例varContent = React.createClass({render: function(){return {this.props.myDataProp}; }});varHelloMessage = React.createClass({getInitialState: function(){return{value: 'Hello Runoob!'}; }, handleChange: function(event){this.setState({value: event.target.value}); }, render: function(){varvalue = this.state. return ; }});ReactDOM.render( , document.getElementById('example'));尝试一下 React 事件以下实例演示通过 onClick 事件来修改数据：React 实例varHelloMessage = React.createClass({getInitialState: function(){return{value: 'Hello Runoob!'}; }, handleChange: function(event){this.setState({value: '菜鸟教程'})}, render: function(){varvalue = this.state. return 点我 {value}; }});ReactDOM.render( , document.getElementById('example'));尝试一下 当你需要从子组件中更新父组件的 state 时，你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。实例如下：React 实例varContent = React.createClass({render: function(){return 点我 {this.props.myDataProp}}});varHelloMessage = React.createClass({getInitialState: function(){return{value: 'Hello Runoob!'}; }, handleChange: function(event){this.setState({value: '菜鸟教程'})}, render: function(){varvalue = this.state. return ; }});ReactDOM.render( , document.getElementById('example'));本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。科技离不开数字百家号最近更新：简介:运气不够，试着营救！作者最新文章相关文章14811人阅读
react（12）
一、无约束(不可控)组件和约束组件(可控)介绍
约束组件，简单的说，就是由React管理了它的value，而非约束性组件的value就是原生的DOM管理的。
1、无约束组件。直接给定组件一个defaultValue值
&input type="text" defaultValue="Hello World!" ref="helloTo" /&
var inputValue = this.ref.hello.getDOMNode().value;
无约束组件可以用在基本的无须任何验证或者输入控制的表单中。
2、约束组件
&input type="text" defaultValue={this.state.hello} /&
3、使用约束组件的好处
a、符合React的数据流
b、数据存储在state中，便于使用
c、便于对数据进行处理
二、不同表单元素的使用
1、label，
2、input，
3、textarea(多行输入)，
4、select下拉列表
var MyForm = React.createClass({
getInitialState: function () {
username: "",
gender: "man",
checked: true
handleUsernameChange: function (event) {
this.setState({
username: event.target.value
handleGenderChange: function (event) {
this.setState({
gender: event.target.value
handleCheckboxChange: function (event) {
this.setState({
checked: event.target.checked
submitHandler: function (event) {
event.preventDefault();
console.log(this.state);
render: function () {
return &form onSubmit={this.submitHandler}&
&label htmlFor="username"&请输入用户名:&/label&
&input id="username" type="text" value={this.state.username} onChange={this.handleUsernameChange} /&
&select value={this.state.gender} onChange={this.handleGenderChange}&
&option value="man"&男&/option&
&option value="woman"&女&/option&
&label htmlFor="checkbox"&同意用户协议&/label&
&input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleCheckboxChange} /&
&button type="submit"&注册&/button&
React.render(&MyForm&&/MyForm&, document.body);
三、事件处理函数复用
1、bind复用
handleChange: function (name, event) {
this.handleChange.bind(this, "input1");
上面表单实例可写成如下
var MyForm = React.createClass({
getInitialState: function () {
username: "",
gender: "man",
checked: true
handleChange: function (name, event) {
var newState = {};
newState[name] = (name == "checked" ? event.target.checked : event.target.value);
this.setState(newState);
submitHandler: function (event) {
event.preventDefault();
console.log(this.state);
render: function () {
return &form onSubmit={this.submitHandler}&
&label htmlFor="username"&请输入用户名:&/label&
&input id="username" type="text" value={this.state.username} onChange={this.handleChange.bind(this, "username")} /&
&select value={this.state.gender} onChange={this.handleChange.bind(this, "gender")}&
&option value="man"&男&/option&
&option value="woman"&女&/option&
&label htmlFor="checkbox"&同意用户协议&/label&
&input id="checkbox" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange.bind(this, "checked")} /&
&button type="submit"&注册&/button&
React.render(&MyForm&&/MyForm&, document.body);
2、name复用
handleChange: function (event) {
var name = event.target.
this.handleC
上面表单实例可写成如下
var MyForm = React.createClass({
getInitialState: function () {
username: "",
gender: "man",
checked: true
handleChange: function (event) {
var newState = {};
var eTarget = event.
newState[eTarget.name] = (eTarget.name == "checked" ? eTarget.checked : eTarget.value);
this.setState(newState);
submitHandler: function (event) {
event.preventDefault();
console.log(this.state);
render: function () {
return &form onSubmit={this.submitHandler}&
&label htmlFor="username"&请输入用户名:&/label&
&input name="username" id="username" type="text" value={this.state.username} onChange={this.handleChange} /&
&select name="gender" value={this.state.gender} onChange={this.handleChange}&
&option value="man"&男&/option&
&option value="woman"&女&/option&
&label htmlFor="checkbox"&同意用户协议&/label&
&input id="checkbox" name="checked" type="checkbox" value="agree" checked={this.state.checked} onChange={this.handleChange} /&
&button type="submit"&注册&/button&
React.render(&MyForm&&/MyForm&, document.body);
四、表单组件自定义
1、为什么要自定义表单组件
a、内因：表单本身具备特殊性：样式统一、信息内聚、行为固定
b、外因：本质上是组件嵌套，更好地组织和管理组件
2、两种定义方式
a、无约束组件
var Radio = React.createClass({
getInitialState: function () {
value: this.props.defaultValue
handleChange: function (event) {
if (this.props.onChange) {
this.props.onChange(event);
this.setState({
value: event.target.value
render: function () {
var children = {};
var value = this.props.value || this.state.value;
React.Children.forEach(this.props.children, function (child, i) {
var label = &label&
&input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} /&
{child.props.children}
children['label' + i] =
}.bind(this));
return &span&{children}&/span&;
var MyForm = React.createClass({
submitHandler: function (event) {
event.preventDefault();
alert(this.refs.radio.state.value);
render: function () {
return &form onSubmit={this.submitHandler}&
&Radio ref="radio" name="my_radio" defaultValue="C"&
&option value="A"&First Option&/option&
&option value="B"&Second Option&/option&
&option value="C"&Third Option&/option&
&button type="submit"&Speak&/button&
React.render(&MyForm&&/MyForm&, document.body);
b、约束组件
var Radio = React.createClass({
getInitialState: function () {
value: this.props.defaultValue
handleChange: function (event) {
if (this.props.onChange) {
this.props.onChange(event); }
this.setState({
value: event.target.value
render: function () {
var children = {};
var value = this.props.value || this.state.
React.Children.forEach(this.props.children, function (child, i) {
var label = &label&
&input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value == value} onChange={this.handleChange} /&
{child.props.children}
children['label' + i] =
}.bind(this));
return &span&{children}&/span&;
var MyForm = React.createClass({
getInitialState: function () {
return {my_radio: "C"};
handleChange: function (event) {
this.setState({
my_radio: event.target.value
submitHandler: function (event) {
event.preventDefault();
alert(this.state.my_radio);
render: function () {
return &form onSubmit={this.submitHandler}&
&Radio name="my_radio" value={this.state.my_radio} onChange={this.handleChange}&
&option value="A"&First Option&/option&
&option value="B"&Second Option&/option&
&option value="C"&Third Option&/option&
&button type="submit"&Speak&/button&
React.render(&MyForm&&/MyForm&, document.body);
阅读：43311在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
问一个问题，react，有个表单，初始值由props传下来的，要怎么实现表单提交啊？
这时由props传下来的值一开始是undefined，之后会改变。
我试过的方法如下:
通过受控表单实现
其实是通过state来控制input的value
state只会初始化一次，或者componentWillMount或者componentDidMount的也只是初始化一次，得到的是undefined。之后无论props传下来的是什么，都不会改变的了。我能想到的方法是componentWillReceiveProps的时候也把props设为state，再通过state设为input的值。
通过非受控表单
ref也试过了，其实用ref就是用非受控表单的方式，用defaultValue设置初始值，通过ref获取input的值。但是同样由这个问题，input的default只初始化一次，这个pros一开始传下来的是undefined，所以之后props改变defaultValue不会改变，还是undefined
有没有其它方法？因为这样把props设为state不太好？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我觉得设置为state 没什么不好的啊 你拿到props了 并没有办法对props修改（除非在onchange里面绑定父级组件传递下来的修改props的方法），只能把props转化为组件内部可控的state，然后进行操作
我一直都是这么做的，关注一波，看看有没有其他大神的答案~
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
将控件value与props绑定，父组件传递onChange方法到子组件，子组件调用此方法来修改props
判断props不为undefined再render组件两种方法可以选一个。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。表单 - React表单HTML表单元素与React中的其他DOM元素有所不同,因为表单元素生来就保留一些内部状态。例如，下面这个表单只接受一个唯一的name。
input type="text" name="name" />
input type="submit" value="Submit" />
当用户提交表单时，HTML的默认行为会使这个表单跳转到一个新页面。在React中亦是如此。但大多数情况下，我们都会构造一个处理提交表单并可访问用户输入表单数据的函数。实现这一点的标准方法是使用一种称为“受控组件”的技术。
在HTML当中，像&input&,&textarea&, 和 &select&这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用
方法进行更新。
我们通过使react变成一种单一数据源的状态来结合二者。React负责渲染表单的组件仍然控制用户后续输入时所发生的变化。相应的，其值由React控制的输入表单元素称为“受控组件”。
例如，我们想要使上个例子中在提交表单时输出name,我们可以写成“受控组件”的形式:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
handleChange(event) {
this.setState({value: event.target.value});
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
render() {
form onSubmit={this.handleSubmit}>
input type="text" value={this.state.value} onChange={this.handleChange} />
input type="submit" value="Submit" />
由于 value 属性是在我们的表单元素上设置的，因此显示的值将始终为 React数据源上this.state.value 的值。由于每次按键都会触发 handleChange 来更新当前React的state，所展示的值也会随着不同用户的输入而更新。
使用”受控组件”,每个状态的改变都有一个与之相关的处理函数。这样就可以直接修改或验证用户输入。例如，我们如果想限制输入全部是大写字母，我们可以将handleChange 写为如下：
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()});
textarea 标签
在HTML当中，&textarea& 元素通过子节点来定义它的文本内容
Hello there, this is some text in a text area
在React中，&textarea&会用value属性来代替。这样的话，表单中的&textarea& 非常类似于使用单行输入的表单：
class EssayForm extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'Please write an essay about your favorite DOM element.'
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
handleChange(event) {
this.setState({value: event.target.value});
handleSubmit(event) {
alert('An essay was submitted: ' + this.state.value);
event.preventDefault();
render() {
form onSubmit={this.handleSubmit}>
textarea value={this.state.value} onChange={this.handleChange} />
input type="submit" value="Submit" />
注意this.state.value是在构造函数中初始化，这样文本区域就能获取到其中的文本。
select 标签
在HTML当中，&select&会创建一个下拉列表。例如这个HTML就创建了一个下拉列表的原型。
option value="grapefruit">Grapefruitoption>
option value="lime">Limeoption>
option selected value="coconut">Coconutoption>
option value="mango">Mangooption>
请注意，Coconut选项最初由于selected属性是被选中的。在React中，并不使用之前的selected属性，而在根select标签上用value属性来表示选中项。这在受控组件中更为方便，因为你只需要在一个地方来更新组件。例如：
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
handleChange(event) {
this.setState({value: event.target.value});
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
render() {
form onSubmit={this.handleSubmit}>
Pick your favorite La Croix flavor:
select value={this.state.value} onChange={this.handleChange}>
option value="grapefruit">Grapefruitoption>
option value="lime">Limeoption>
option value="coconut">Coconutoption>
option value="mango">Mangooption>
input type="submit" value="Submit" />
总之，&input type=&text&&, &textarea&, 和 &select& 都十分类似 - 他们都通过传入一个value属性来实现对组件的控制。
file input 标签
在HTML当中，&input type=&file&& 允许用户从他们的存储设备中选择一个或多个文件以提交表单的方式上传到服务器上, 或者通过 Javascript 的
对文件进行操作 。
&input type=&file& /&
由于该标签的
value 属性是只读的， 所以它是 React 中的一个非受控组件。我们会把它和其他非受控组件一起在进行详细的介绍。
多个输入的解决方法
当你有处理多个受控的input元素时，你可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
this.handleInputChange = this.handleInputChange.bind(this);
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
render() {
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
Number of guests:
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
注意我们如何使用ES6当中的语法来更新与给定输入名称相对应的状态键：
this.setState({
[name]: value
相当于如下ES5语法
var partialState = {};
partialState[name] = value;
this.setState(partialState);
同样由于 setState() 自动，因此我们只需要使用发生变化的部分调用它。
受控组件的替代方法
有时使用受控组件可能很繁琐，因为您要为数据可能发生变化的每一种方式都编写一个事件处理程序，并通过一个组件来管理全部的状态。当您将预先存在的代码库转换为React或将React应用程序与非React库集成时，这可能变得特别烦人。在以上情况下，你或许应该看看，这是一种表单的替代技术。安装快速开始高级指引参考贡献FAQ上一篇下一篇文档社区参考资料其他Copyright (C) 2017 Facebook Inc.