React函数组件状态提升报错：无法读取value属性，求实现输入同步

你尝试通过函数组件的状态提升实现两个输入框共享输入值、实时同步，但运行时抛出Uncaught TypeError: Cannot read property 'value' of undefined错误，错误代码如下：

const Nivedhan = () => {            // parent component
const[val,setVal]=useState('')

  function change(e){
   setVal(e.target.value)
  }
 
  return (
       
    <div>
     
      <Nivedhan2 values={change}/>
      <Nivedhan3 values={change}/>
    </div>
  )
}

export default Nivedhan;  


//============================================================================



function Nivedhan2(props){         // child comp 1
  
  function Handle(e){
    props.values(e.target.value)
  }
  
  return(<div>
    <input type='text' onChange={Handle}></input>
  </div>)

}

//=============================================================================
function Nivedhan3(props){        // child comp 2
  
  function Handles(e){
    props.values(e.target.value)
  }
  
  return(<div>
    <input type='text' onChange={Handles}></input>
  </div>)

}

错误原因 #

父组件的change函数期望接收事件对象e，并从中读取e.target.value；但子组件调用props.values时，直接传递了e.target.value（字符串类型的输入值），此时change函数的参数e变成了字符串，自然不存在target属性，就会抛出"无法读取undefined的value属性"的错误。

另外你的代码还缺少关键逻辑：第二个输入框没有绑定父组件的状态值，即使修复参数问题，也无法实现同步显示。

修复方案 #

有两种可行的修复方式，选其一即可：

方式一：子组件传递事件对象给父组件

子组件直接把事件对象传给父组件的change函数，让父组件自己读取输入值，同时给两个输入框绑定父组件的val状态值实现同步：

import { useState } from 'react';

const Nivedhan = () => {            // parent component
  const[val, setVal] = useState('')

  function change(e){
    setVal(e.target.value)
  }
 
  return (
    <div>
      <Nivedhan2 values={change} val={val}/>
      <Nivedhan3 values={change} val={val}/>
    </div>
  )
}

export default Nivedhan;  

function Nivedhan2(props){         // child comp 1
  return(<div>
    <input type='text' onChange={props.values} value={props.val}></input>
  </div>)
}

function Nivedhan3(props){        // child comp 2
  return(<div>
    <input type='text' onChange={props.values} value={props.val}></input>
  </div>)
}

方式二：父组件修改函数接收输入值

父组件的change函数改为直接接收输入值，子组件传递e.target.value，同时给输入框绑定状态值：

import { useState } from 'react';

const Nivedhan = () => {            // parent component
  const[val, setVal] = useState('')

  function change(inputVal){
    setVal(inputVal)
  }
 
  return (
    <div>
      <Nivedhan2 values={change} val={val}/>
      <Nivedhan3 values={change} val={val}/>
    </div>
  )
}

export default Nivedhan;  

function Nivedhan2(props){         // child comp 1
  function Handle(e){
    props.values(e.target.value)
  }
  
  return(<div>
    <input type='text' onChange={Handle} value={props.val}></input>
  </div>)
}

function Nivedhan3(props){        // child comp 2
  function Handles(e){
    props.values(e.target.value)
  }
  
  return(<div>
    <input type='text' onChange={Handles} value={props.val}></input>
  </div>)
}

关键说明 #

• 给输入框添加value={props.val}绑定父组件状态，才能让两个输入框实时同步显示同一值
• 保证父组件的回调函数和子组件的传参类型匹配，避免参数不兼容导致的错误

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