Fe-interview: [react] 如何给非控组件设置默认的值？

[haizhilin2013]

[react] 如何给非控组件设置默认的值？

[jiangbo2015]

<input defaultValue="123" />

[idododu]

• 表单元素依赖于状态(state)，表单元素需要默认值实时映射到状态的时候，就是受控组件

<input name="username" type="text" value={this.state.username} onChange={this.handleChange} />

• 不通过state控制表单元素，而是通过ref来控制的表单元素就是非受控组件

<input name="username" type="text" ref={username=>this.username=username}/>

[UserRegistering]

给组件设置默认值，难道就没人说static defaultProps吗？

[liuyingbin19222]

可在state设置默认值;

[baihuzi1993]

给非受控组件设置defaultValue属性，给定默认值
官方文档

示例代码：

import React from 'react'

export default class UnControlledComp extends React.Component {
  constructor(props) {
    super(props)
    this.inputRef = React.createRef()
  }

  handleClick = () => {
    console.log(this.inputRef.current.value);
  }

  render () {
    return (
      <>
        <input defaultValue="default value" ref={this.inputRef}></input>
        <button onClick={this.handleClick}>点击</button>
      </>
    )
  }
}