useControllableValue

兼容状态受控和状态自理

代码演示

非受控

如果 props 中没有 value，则组件内部自理 state

Live Editor

Copy

(() => { function Child(props) { const [state, setState] = useControllableValue(props, { defaultValue: 0, }) return ( <div> <input type="number" value={state} onChange={() => setState(state + 1)} style={{ width: 300 }} /> <button type="button" onClick={() => setState(state + 1)} style={{ margin: '0 4px' }} > + </button> <button type="button" onClick={() => setState(state - 1)}> - </button> </div> ) } return function Example() { return ( <div> <Child /> </div> ) } })()

(() => {
  function Child(props) {
    const [state, setState] = useControllableValue(props, {
      defaultValue: 0,
    })
    return (
      <div>
        <input
          type="number"
          value={state}
          onChange={() => setState(state + 1)}
          style={{ width: 300 }}
        />
        <button
          type="button"
          onClick={() => setState(state + 1)}
          style={{ margin: '0 4px' }}
        >
          +
        </button>
        <button type="button" onClick={() => setState(state - 1)}>
          -
        </button>
      </div>
    )
  }
  return function Example() {
    return (
      <div>
        <Child />
      </div>
    )
  }
})()

受控

如果 props 有 value 字段，则由父级接管控制 state

Live Editor

Copy

(() => { function Child(props) { const [state, setState] = useControllableValue(props, { defaultValue: 0, }) return ( <div> <input type="number" value={state} onChange={() => setState(state + 1)} style={{ width: 300 }} /> <button type="button" onClick={() => setState(state + 1)} style={{ margin: '0 4px' }} > + </button> <button type="button" onClick={() => setState(state - 1)}> - </button> </div> ) } return function Example() { const [value, setValue] = useState(0) return ( <div> <Child value={value} onChange={setValue} /> </div> ) } })()

(() => {
  function Child(props) {
    const [state, setState] = useControllableValue(props, {
      defaultValue: 0,
    })
    return (
      <div>
        <input
          type="number"
          value={state}
          onChange={() => setState(state + 1)}
          style={{ width: 300 }}
        />
        <button
          type="button"
          onClick={() => setState(state + 1)}
          style={{ margin: '0 4px' }}
        >
          +
        </button>
        <button type="button" onClick={() => setState(state - 1)}>
          -
        </button>
      </div>
    )
  }
  return function Example() {
    const [value, setValue] = useState(0)
    return (
      <div>
        <Child value={value} onChange={setValue} />
      </div>
    )
  }
})()

API

const [state, setState] = useControllableValue(props: object, options?: Options)

Options

参数	说明	必选	类型	默认值
defaultValue	默认值	-	any	-
defaultValuePropName	默认值的属性名	-	string	defaultValue
valuePropName	值的属性名	-	string	value
onChangePropName	修改值的函数名	-	string	onChange

Result

参数	说明 类型
state	状态值
setState	修改状态的函数