react实现各种 双向绑定
时间: 2023-08-29 22:05:43 浏览: 45
React 中实现双向绑定可以使用受控组件和非受控组件两种方式。
1. 受控组件
受控组件是由 React 控制状态并根据状态更新 UI 的组件。在受控组件中,表单元素的值由 React state 驱动,并通过事件处理函数进行更新。
示例代码:
```
import React, { useState } from 'react';
function Input() {
const [value, setValue] = useState('');
const handleChange = (e) => {
setValue(e.target.value);
};
return (
<input type="text" value={value} onChange={handleChange} />
);
}
```
2. 非受控组件
非受控组件是不由 React 控制状态的组件。在非受控组件中,表单元素的值由 DOM 自身维护,并通过 ref 属性获取其值。
示例代码:
```
import React, { useRef } from 'react';
function Input() {
const inputRef = useRef(null);
const handleClick = () => {
console.log(inputRef.current.value);
};
return (
<>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>Get Value</button>
</>
);
}
```
以上是两种实现双向绑定的方式,需要根据具体的业务场景来选择使用哪种方式。