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

Question

希望你一切顺利！我希望根据我从 props 收到的状态来设置 Input 的值！我可以在占位符中设置来自“配置文件”状态的所有信息，但是当把它放在值字段中时它不显示任何内容这是我的代码和我使用的表格：

                        <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> ``` 

the useEffect function and the declaration of state :

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

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

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

Answer 2

I am looking to set the value of Input from the state that i receive from props!

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

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 中保留一些来自道具的新状态。 props 的变化总是会触发 re-render，所以你似乎真的在问如何将 props 传递到你的表单中。

下面是一个配置文件使用状态保持值的示例。这些值可以作为道具发送到另一个组件，如您的表单。配置文件字段的值将依赖于状态。表单组件将依赖基于该状态的道具。

您可以在配置文件字段中键入内容以查看表单值是如何通过 props 更新的。在顶部表单中输入不会更新值，因为这些是 read-only 和“从道具设置”。

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

希望对您有所帮助。

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;

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

how to set the value of Input from state ( React app)

html

javascript

reactjs

antd

react-hooks