跨越美利坚面试创业技术培训 2017-12-15
Sometimes users of your component want to have more control over what the internal state is. In this lesson we'll learn how to allow users to control some of our component’s state just like the<input />
'svalue
prop.
Controlled props is the prop that component let user fully control.
import React from 'react'; class Toggle extends React.Component { // An empty function static defaultProps = { defaultOn: false, onToggle: () => { } }; // default state value initialState = {on: this.props.defaultOn}; state = this.initialState; isControlled() { return this.props.on !== undefined; } // toggle method toggle = () =>{ if (this.isControlled()) { this.props.onToggle(!this.props.on) } else { this.setState( ({on}) => ({on: !on}), () => { this.props.onToggle(this.state.on) } ); } }; reset = () => this.setState( this.initialState ); render() { return this.props.render({ on: this.isControlled() ? this.props.on : this.state.on, toggle: this.toggle, reset: this.reset, getProps: (props) => { return { 'aria-expanded': this.state.on, role: 'button', ...props }; } }); } } export default Toggle;