React应用中绑定动态默认值的input输入框无法正常编辑问题咨询

你遇到的是React受控组件的典型问题：只要你给<input>显式绑定了value属性，它就会成为受控组件，输入框的展示值完全由你绑定的value变量决定，你没有更新该变量的话，React每次重渲染都会把输入框的值重置为绑定的初始值。
你观察到的「每次只能变更1个字符」的现象是因为：输入操作触发瞬间原生DOM的input值会临时变更，同时触发onChange回调打印该临时值，但紧接着React触发组件重渲染，直接将输入框值覆盖为你绑定的固定值，所以下一次输入又会在初始值基础上修改1位。

1. 确认是否直接将只读的props作为input的value绑定源：你原始代码中绑定的selectedItem来自props，props本身不可直接修改，onChange中执行的逻辑没有更新该绑定源，自然无法改变输入框展示值。
2. 确认绑定的value对应的变量是否在onChange中被正确更新：你后续测试的静态值写法，value直接写死为字符串，onChange中没有修改任何绑定变量，必然导致输入框值被强制重置。

不要直接绑定props作为输入框的值，将输入值存在组件内部state中，再同步props变更的状态即可，示例代码如下：

import { useState, useEffect } from 'react';

function YourComponent({ selectedEvent }) {
  const { selectedItem } = selectedEvent;
  // 用本地state托管输入框值
  const [firstname, setFirstname] = useState('');

  // 监听选中项变更，同步state（新建时selectedItem为空，自动清空输入框）
  useEffect(() => {
    setFirstname(selectedItem?.client?.firstname || '');
  }, [selectedItem]);

  return (
    <input 
      type="text" 
      className="form-control" 
      placeholder="John" 
      onChange={e => setFirstname(e.target.value)} 
      value={firstname}
    />
  )
}

如果修改后的值需要回传给父组件，可在onChange逻辑中调用父组件传递的回调方法同步修改后的值即可，不要直接修改props。

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