React跨组件传递输入值后输入框无法编辑的问题求助

错误提示已经明确指出：你给表单字段传递了value属性但未提供onChange处理函数，这会让字段变成只读状态。在React中，一旦给input设置了value属性，它就成为受控组件，必须通过onChange事件同步更新对应的状态值，否则输入框内容无法与状态联动，自然无法编辑。

你的CustomizerSection组件仅接收了Width和Length的初始值，但没有拿到更新这两个状态的方法（setWidth和setLength），也未给input绑定onChange事件，导致输入框只能显示值却无法修改。

要让CustomizerSection的输入框可编辑，只需完成两步：

1. 在App组件中给CustomizerSection传递状态更新方法setWidth和setLength
2. 在CustomizerSection的input上绑定onChange事件，调用对应的状态更新方法

App.js #

import React from 'react';
import { useState } from 'react';
import { StartingSection } from './components/StartingSection';
import { CustomizerSection } from './components/CustomizerSection';

function App() {
  const [checkSection, setSection] = useState(false);
  const showCustomizerSection = () => setSection(true);

  const [Width, setWidth] = useState();
  const [Length, setLength] = useState();
  
  return (
    <div className="App">
        {checkSection ? 
            <CustomizerSection 
              Width={Width} 
              Length={Length}
              setWidth={setWidth}
              setLength={setLength}
            /> 
          : 
            <StartingSection 
              Width={Width}
              setWidth={setWidth}
              Length={Length}
              setLength={setLength}
              onClick={showCustomizerSection}  
            />
          }
    </div>
  );
}

CustomizerSection.jsx #

export function CustomizerSection({Width, Length, setWidth, setLength}) {
    return(
        <div>          
           <input type="number" value={Width || ''} onChange={event => setWidth(event.target.value)} />
           <input type="number" value={Length || ''} onChange={event => setLength(event.target.value)} />
        </div>
    )
}

• 加入value={Width || ''}是为了避免初始状态为undefined时input出现控制台警告
• 修改后两个区块的输入框都与App组件的状态双向绑定，任意区块修改值都会同步更新全局状态

内容的提问来源于stack exchange，提问作者s.kuznetsov