@ -14,17 +14,17 @@ Form components such as `<input>`, `<textarea>`, and `<option>` differ from othe
Form components support a few props that are affected via user interactions:
Form components support a few props that are affected via user interactions:
-`value`, supported by `<input>` and `<textarea>` components.
*`value`, supported by `<input>` and `<textarea>` components.
-`checked`, supported by `<input>` components of type `checkbox` or `radio`.
*`checked`, supported by `<input>` components of type `checkbox` or `radio`.
-`selected`, supported by `<option>` components.
*`selected`, supported by `<option>` components.
In HTML, the value of `<textarea>` is set via children. In React, you should use `value` instead.
In HTML, the value of `<textarea>` is set via children. In React, you should use `value` instead.
Form components allow listening for changes by setting a callback to the `onChange` prop. The `onChange` prop works across browsers to fire in response to user interactions when:
Form components allow listening for changes by setting a callback to the `onChange` prop. The `onChange` prop works across browsers to fire in response to user interactions when:
- The `value` of `<input>` or `<textarea>` changes.
* The `value` of `<input>` or `<textarea>` changes.
- The `checked` state of `<input>` changes.
* The `checked` state of `<input>` changes.
- The `selected` state of `<option>` changes.
* The `selected` state of `<option>` changes.
Like all DOM events, the `onChange` prop is supported on all native components and can be used to listen to bubbled change events.
Like all DOM events, the `onChange` prop is supported on all native components and can be used to listen to bubbled change events.
@ -69,39 +69,39 @@ To learn more about refs, including ways to use them effectively, see our [more
Components have three main parts of their lifecycle:
Components have three main parts of their lifecycle:
-**Mounting:** A component is being inserted into the DOM.
***Mounting:** A component is being inserted into the DOM.
-**Updating:** A component is being re-rendered to determine if the DOM should be updated.
***Updating:** A component is being re-rendered to determine if the DOM should be updated.
-**Unmounting:** A component is being removed from the DOM.
***Unmounting:** A component is being removed from the DOM.
React provides lifecycle methods that you can specify to hook into this process. We provide **will** methods, which are called right before something happens, and **did** methods which are called right after something happens.
React provides lifecycle methods that you can specify to hook into this process. We provide **will** methods, which are called right before something happens, and **did** methods which are called right after something happens.
### Mounting
### Mounting
-`getInitialState(): object` is invoked before a component is mounted. Stateful components should implement this and return the initial state data.
*`getInitialState(): object` is invoked before a component is mounted. Stateful components should implement this and return the initial state data.
-`componentWillMount()` is invoked immediately before mounting occurs.
*`componentWillMount()` is invoked immediately before mounting occurs.
-`componentDidMount(DOMElement rootNode)` is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.
*`componentDidMount(DOMElement rootNode)` is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.
### Updating
### Updating
-`componentWillReceiveProps(object nextProps)` is invoked when a mounted component receives new props. This method should be used to compare `this.props` and `nextProps` to perform state transitions using `this.setState()`.
*`componentWillReceiveProps(object nextProps)` is invoked when a mounted component receives new props. This method should be used to compare `this.props` and `nextProps` to perform state transitions using `this.setState()`.
-`shouldComponentUpdate(object nextProps, object nextState): boolean` is invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare `this.props` with `nextProps` and `this.state` with `nextState` and return false if React should skip updating.
*`shouldComponentUpdate(object nextProps, object nextState): boolean` is invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare `this.props` with `nextProps` and `this.state` with `nextState` and return false if React should skip updating.
-`componentWillUpdate(object nextProps, object nextState)` is invoked immediately before updating occurs. You cannot call `this.setState()` here.
*`componentWillUpdate(object nextProps, object nextState)` is invoked immediately before updating occurs. You cannot call `this.setState()` here.
-`componentDidUpdate(object prevProps, object prevState, DOMElement rootNode)` is invoked immediately after updating occurs.
*`componentDidUpdate(object prevProps, object prevState, DOMElement rootNode)` is invoked immediately after updating occurs.
### Unmounting
### Unmounting
-`componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.
*`componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.
### Mounted Methods
### Mounted Methods
_Mounted_ composite components also support the following methods:
_Mounted_ composite components also support the following methods:
-`getDOMNode(): DOMElement` can be invoked on any mounted component in order to obtain a reference to its rendered DOM node.
*`getDOMNode(): DOMElement` can be invoked on any mounted component in order to obtain a reference to its rendered DOM node.
-`forceUpdate()` can be invoked on any mounted component when you know that some deeper aspect of the component's state has changed without using `this.setState()`.
*`forceUpdate()` can be invoked on any mounted component when you know that some deeper aspect of the component's state has changed without using `this.setState()`.