react 父祖件給子組件表單賦值
时间: 2023-09-18 17:11:15 浏览: 56
在 React 中,可以通过 props 将父组件的数据传递给子组件,并在子组件中使用它们来给表单赋值。
首先,在父组件中定义一个状态(state),并将它传递给子组件作为 props。
```javascript
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const [formValue, setFormValue] = useState('');
const handleFormChange = (event) => {
setFormValue(event.target.value);
};
return (
<div>
<input type="text" value={formValue} onChange={handleFormChange} />
<ChildComponent formValue={formValue} />
</div>
);
}
export default ParentComponent;
```
然后,在子组件中接收父组件传递的 props,并使用它来设置表单的值。
```javascript
import React from 'react';
function ChildComponent(props) {
return (
<div>
<input type="text" value={props.formValue} readOnly />
</div>
);
}
export default ChildComponent;
```
这样,当父组件的表单值改变时,子组件的表单值也会随之更新。子组件的输入框是只读的,因为它的值是从父组件传递过来的,不能直接修改。
阅读全文