使用 React 18 将状态从子级提升到父级

Question

我想捕获 UserInput 组件中的数据并将其带回 App.jsx 并将其存储在状态中。

我的投资对象是这样的

const [initialInvestment, setInitialInvestment] = useState({
        initialInvestment: 100,
        annualInvestment: 200,
        expectedReturn: 3.3,
        duration: 4
    });

该物体看起来像

{
    initialInvestment: 100,
    annualInvestment: 200,
    expectedReturn: 3.3,
    duration: 4
}

我的组件 UserInput.jsx 的 JSX 代码

    <div id={'user-input'}>
        <div className={'input-group'}>
            <div>
                <label>Initial Investment</label>
                <input type={'number'} value={investment.initialInvestment} onKeyDown={onInvestmentUpdate} required/>
            </div>
            <div>
                <label>Annual Investment</label>
                <input type={'number'} value={investment.annualInvestment}/>
            </div>
            <div>
                <label>Expected Return</label>
                <input type={'number'} value={investment.expectedReturn}/>
            </div>
            <div>
                <label>Duration</label>
                <input type={'number'} value={investment.duration}/>
            </div>
        </div>
    </div>

我需要从 UserInput 中提升状态并将其带到 App.jsx

应用程序.jsx

const investmentHandler = (investment) => {
    //const newInvestment = [...initialInvestment, ...investment];
    setInitialInvestment(prevInvestment => {
        return {
            ...prevInvestment,
            investment
        }
    });
}

        <UserInput init={initialInvestment} onUpdate={investmentHandler}/>

Answer 1

据我了解，以下是适用于您的应用程序的基本数据下降/事件上升原则。我还没有详细了解所有细节，但它让您知道它应该是什么样子。

我不清楚的一件事是为什么您只有一个输入的事件处理程序，但您似乎想要更新应用程序处理程序中的整个对象。我会根据特定的表单值单独更新对象属性，或者只是等待整个表单提交并完成所有操作。

// App.jsx
const App = () => {

  const [initialInvestment, setInitialInvestment] = useState({
      initialInvestment: 100,
      annualInvestment: 200,
      expectedReturn: 3.3,
      duration: 4
  });

  const onInvestmentChange = investment => {
      setInitialInvestment(prevInvestment => {
          return {
              ...prevInvestment,
              investment
          }
      });
  }

  return (
    <UserInput investment={initialInvestment} onUpdate={onInvestmentChange} />
  );
}

// UserInput.jsx

const UserInput = props => {
  const handleChange = event => {
    props.onInvestmentChange(event.currentTarget.value);
  }

  return (
    <div id={'user-input'}>
        <div className={'input-group'}>
            <div>
                <label>Initial Investment</label>
                <input type={'number'} value={investment.initialInvestment} onKeyDown={() => handleChange(event)} required/>
            </div>
            <div>
                <label>Annual Investment</label>
                <input type={'number'} value={investment.annualInvestment}/>
            </div>
            <div>
                <label>Expected Return</label>
                <input type={'number'} value={investment.expectedReturn}/>
            </div>
            <div>
                <label>Duration</label>
                <input type={'number'} value={investment.duration}/>
            </div>
        </div>
    </div>
  );
}