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

Question

我希望从我从道具中获得的州设置输入价值！我可以从占位符中的“配置文件”状态设置所有信息，但是将其放在值字段中时，它没有显示任何信息。这是我的代码和我使用的表格：

<Form
    name="basic"
    wrapperCol={{ span: 24 }}
    onFinish={onUpdate}
    onFinishFailed={onFinishFailed}>
    <FormItem>
        <Input prefix={<ContactsTwoTone />} placeholder={profile.name} />
    </FormItem>

    <FormItem name="email"
        rules={[
            {
                type: 'email',
                message: 'The input is not valid E-mail!',
            }
        ]}
    >
        <Input value={profile.email} name="name" prefix={<MailTwoTone />} placeholder={profile}  />
    </FormItem>
    <FormItem name="mobile" value={profile.mobile} >
        <Input value={profile.mobile} name="mobile" prefix={<PhoneTwoTone />} placeholder={profile.mobile} />
    </FormItem>
    <FormItem name="addres">
        <Input name="addres" prefix={<HomeTwoTone />} placeholder={profile.addres} />
    </FormItem>
    <FormItem name="description">
        <Input.TextArea name="description" placeholder="description" rows={4} prefix={<ContainerTwoTone />} />
    </FormItem>
    <FormItem>
        <Button className="width-100" type="primary" htmlType="submit" onClick={onUpdate} >Update</Button>
    </FormItem>
</Form> 

使用效果函数和状态声明：

const [visible, setVisible] = useState(false);
const FormItem = Form.Item;
const [profile, setProfile] = useState({});

useEffect(() => {
    setProfile(props.profile); 
}, [props.profile]);

const showDrawer = () => {
    setVisible(true);
}; 

Answer 1

我希望从我收到的状态中设置输入的价值
从道具！

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

解决方案和演示

https://codesandbox.io/p/devbox/1q0ftq

import { useState } from "react";

const initialValue = "John";

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

  console.log("state: ", name);

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

  return (
    <div>
      <h2>Form</h2>
      <pre>Type in the input...</pre>
      <form>
        <input type="text" onChange={handleChange} value={name} />
      </form>
      <pre>state: {name}</pre>
    </div>
  );
};

export default App;

您的问题和示例代码，似乎您可能会认为Prop应该根据您的使用效果告知某些新状态。

这里有几个问题。您在 useffect 中包括一个道具作为依赖关系。这是多余的，因为当道具发生变化时，反应已经触发了重新渲染。因此，使用效果在此处不需要或适用。新值将通过道具可用。我们可以在组件中简单地使用它，知道道具是最新的。这使问题更加简单。

您似乎本质上是在询问如何将道具传递到您的形式中。以下是用于管理配置文件状态的可编辑档案部分的示例。表单部分只需读取状态的值并显示配置文件信息。这说明了您描述的所需行为。表单只是接收档案状态作为道具传递的配置文件状态的组件。

配置文件字段依靠状态来实现其价值。表单组件依赖于基于该状态的道具。

Example Passing Props to Component

https://codesandbox.io/p/devbox/dawn-cloud -sbxmoz

import { useState } from "react";

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

const Form = ({ firstName, lastName }) => (
  <div>
    <h2>Form</h2>
    <pre>Values based on profile...</pre>
    <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("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>
      <pre>Type to edit profile fields...</pre>
      <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;

说明和资源

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

您可能不需要仅阅读表格，但这仅基于您的示例。您可以将个人资料数据作为道具传递给任何需要的组件。

我认为我希望在这里沟通的想法是考虑您的个人资料数据（您的状态）的“真实性来源”，并根据需要使用的其他组件来确定您想要在哪里生活。

这通常称为受控对不受控制的组件。该概念通常带有表单输入，因为用React状态控制表单对于作为用户类型访问和验证输入非常有用，使用传统方式使用HTML输入可以实现。

资源

希望这会有所帮助。

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"/>