如何从状态设置 Input 的值（React 应用程序）

Answer 1

我希望从我收到的状态中设置 Input 的值 来自道具！

如果您只是想从状态设置输入，这里是一个简单的例子。

解决方案和演示

https://codesandbox.io/s/trusting-swanson-1q0ftq?file=/src/App.js

import { useState } from 'react';

const initialValue = 'John';

const App = () => {
  const [name, setName] = useState(initialValue);

  console.log('render');
  console.log('state: ', name);

  const handleChange = (event) => {
    const value = event.target.value;
    setName(value);
  };

  return (
    <div>
      <h2>Form</h2>
      <form>
        <input type='text' onChange={handleChange} value={name} />
      </form>
    </div>
  );
};

export default App;

关于你的问题的其余部分和示例代码，看起来你可能认为道具应该根据你的useEffect 通知一些新的状态。

但是，useEffect 会在每次更新 prop 时运行，并且当 prop 更新时，React 已经触发了重新渲染。我们已经可以在我们的组件中使用新值，所以我们不需要弄乱useEffect 或状态。这将是多余和不必要的。

您似乎本质上是在询问如何将道具传递到您的表单中。下面是一个使用保持状态的值的配置文件示例。为了说明 props 与 state 的使用，表单值在 state 中管理，但被另一个组件作为 props 使用，就像你的表单一样。

配置文件字段的值依赖于状态。表单组件将依赖基于该状态的道具。

使用状态和道具的示例

https://codesandbox.io/s/damp-fire-sbxmoz?file=/src/App.js

import { useState } from 'react';

const initialProfile = {
  firstName: 'John',
  lastName: 'Doe',
};

const Form = ({ firstName, lastName }) => (
  <div>
    <h2>Form</h2>
    <form>
      <input
        label='First Name'
        type='text'
        name='firstName'
        value={firstName}
      />
      <input
        label='Last Name' 
        type='text' 
        name='lastName' 
        value={lastName} 
      />
    </form>
  </div>
);

const App = () => {
  const [profileFields, setProfileFields] = useState(initialProfile);

  const { firstName, lastName } = profileFields;

  console.log('render, profile fields: ', profileFields);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setProfileFields(() => {
      return {
        ...profileFields,
        [name]: value,
      };
    });
  };

  return (
    <div>
      <Form firstName={firstName} lastName={lastName} />
      <h2>Profile</h2>
      <form>
        <input
          label='First Name'
          type='text'
          onChange={handleChange}
          name='firstName'
          value={firstName}
        />
        <input
          label='Last Name'
          type='text'
          onChange={handleChange}
          name='lastName'
          value={lastName}
        />
      </form>
    </div>
  );
};

export default App;

解释

您可以输入配置文件字段以查看表单值如何通过道具更新。在顶部表单中键入不会更新值，因为这些是只读的并且“从道具设置”。

您可能不需要只读表单，但这是基于您的示例。您可以将您的个人资料数据作为道具传递给任何需要它的组件。我认为我希望在这里交流的想法是为您的个人资料数据（您的状态）考虑一个“单一事实来源”，并决定您希望它在哪里生活，而不是其他组件需要访问它。

希望这会有所帮助。

Answer 2

尝试将他们注销，看看他们是否正在做他们应该做的事情。

const SomeInput = (props) => {
  const { name, placeholder, value } = props;
  console.log(`${name} placeholder: ${placeholder} value: ${value}`);
  return(
    <input placeholder={placeholder} value={value}/>
  );
};

const App = () => {
  const [state,setState] = React.useState('foo');
  
  console.log(`App state: ${state}`);
  
  return(
    <div>
      <SomeInput name={'input1'} placeholder={state}/>
      <SomeInput name={'input2'} value={state}/>
    </div>
  );
};

ReactDOM.render(<App/>,document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>