关于react 使用 ref取实际的dom节点的问题

Question

两个console的实际dom节点的值

这个不行

      let value 
       ...
      <input type="text" ref={( ref ) => {
        value = ref.value
      }}/>
      <button onClick={( e ) => {
        console.log(value)
      }}>确定
      </button>
      <button onClick={cancel}>取消</button>
      

这个可以

    let input
    ...
<form onSubmit={e => {
    e.preventDefault();
    if (!input.value.trim()) {
      return
    }
    console.log(input.value);
    input.value = ''
  }}>
    <input ref={node => {
      input = node
    }} />
    <button type="submit">
      确定
    </button>
    <button onClick={cancel}>取消</button>
</form>        

Answer 1

这句代码 我认为 value获取的是render那一时刻 input的值。
第二种，获取了input的引用，所以可以拿到input的值

ref={( ref ) => {
        value = ref.value
}}