如何访问文本输入框内的值？可否不使用ref直接从event变量获取值？

完全可以，React官方更推荐使用受控组件的方案实现该需求，不需要操作DOM引用，完全通过state驱动输入框的状态。

回调形式的ref会在两个时机触发：

• 组件挂载完成时，参数是当前input的真实DOM元素
• 组件卸载时，参数是null
  你直接在回调里写console.log(input.value)，当组件卸载触发回调时，input为null，访问value属性就会抛出异常。而单独执行console.log(this.input.value)时，组件已经完成挂载，this.input已经被赋值为DOM元素，所以可以正常执行。

你给出的代码是类组件中渲染的输入框元素，代码还原后如下：

<input 
  type="text" 
  className = "form-control form-control-lg"
  placeholder ='0'
  onChange = {async (event)=>{
    const tokenValue = await this.input.value.toString() * 100
    console.log(this.input.value)
    this.setState ({
        output:tokenValue
    })
    console.log(this.state.output)
  }}
  ref ={(input)=>{this.input = input}}
  required
/>

运行逻辑拆解：

1. 组件挂载阶段：ref回调执行，将当前input的真实DOM节点赋值给类实例的input属性，后续可以通过this.input直接操作这个DOM
2. 每次用户修改输入框内容时触发onChange事件：
   • 首先读取this.input.value拿到用户输入的最新值，转字符串后乘以100，这里的await没有实际作用，因为右侧是同步计算逻辑，不是Promise对象
   • 控制台打印输入框的当前值
   • 调用setState将计算得到的tokenValue存入state的output字段
   • 这里直接打印this.state.output大概率拿到的是更新前的旧值，因为React的setState是异步批量更新的，同步代码执行时state还没完成更新

不需要操作DOM引用，直接通过事件对象拿到输入值，代码更符合React的设计理念：

// 构造函数中初始化state
constructor(props) {
  super(props)
  this.state = {
    inputVal: '',
    output: 0
  }
}

// 渲染输入框
<input 
  type="text" 
  className="form-control form-control-lg"
  placeholder='0'
  value={this.state.inputVal}
  onChange={(event) => {
    const newInput = event.target.value
    const tokenValue = newInput.toString() * 100
    console.log(newInput)
    this.setState({
      inputVal: newInput,
      output: tokenValue
    }, () => {
      // setState回调中可以拿到更新后的最新state
      console.log(this.state.output)
    })
  }}
  required
/>

内容的提问来源于stack exchange，提问作者vikram sah