2019-09-09
描述
使用内部声明的方式渲染一个 <input>
元素,让其可以使用回调函数将值传递给父亲组件。
- 使用对象解构为
<input>
元素的某些属性设置默认值 - 使用
React.setState()
hook 创建一个value
状态变量, 给定值等于defaultValue
的属性值 - 使用第二个参数设置为
value
状态变量的React.useEffect()
hook,这样每当value
更新时就可以对callback
函数进行回调 - 渲染一个包含常用属性的
<input>
元素,使用onChange
事件对value
状态变量进行更新
实现
function ControlledInput({
callback,
type = 'text',
disabled = false,
readOnly = false,
defaultValue,
placeholder = ''
}) {
const [value, setValue] = React.useState(defaultValue);
React.useEffect(() => {
callback(value);
}, [value]);
return (
<input
defaultValue={defaultValue}
type={type}
disabled={disabled}
readOnly={readOnly}
placeholder={placeholder}
onChange={({ target: { value } }) => setValue(value)}
/>
);
}
使用
ReactDOM.render(
<ControlledInput
type="text"
placeholder="Insert some text here..."
callback={val => console.log(val)}
/>,
document.getElementById('root')
);
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于