javascript - Redux-form 没有自动接收 onChange
问题描述
我创建了一个组件,如下所示:
import React from 'react';
import PropTypes from 'prop-types';
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
import { noop } from '../../utils';
const ButtonGroup = ({ options, value, onChange }) => {
console.log(onChange, 'onChange');
console.log(value, 'value');
return (
<ToggleButtonGroup
value={value}
exclusive
onChange={(event, val) => { onChange(val); }}
>
{
options.map(option => (
<ToggleButton value={option}>
{option}
</ToggleButton>
))
}
</ToggleButtonGroup>
);
};
ButtonGroup.propTypes = {
options: PropTypes.arrayOf(PropTypes.any),
onChange: PropTypes.func,
value: PropTypes.string,
};
ButtonGroup.defaultProps = {
options: [],
onChange: noop,
value: '',
};
export default ButtonGroup;
我正在尝试按如下方式使用它:
<Form onSubmit={handleSubmit(onCreateElement)}>
<label htmlFor="element-type">Select an option</label>
<div className="selectable">
<Field
name="element-type"
className="form-field"
component={ButtonGroup}
options={['One', 'Two', 'Three']}
/>
</div>
<button type="submit">Submit</button>
</Form>
但是 redux-form 永远不会将它的 onChange 方法传递给我的组件。因此,我的组件不会更改所选值。
这是我的代码框: https ://codesandbox.io/s/yw7xj3vvx
解决方案
哦!天哪,这是一个很小的错误,我把它当成了大错误。我需要在组件内部使用props.input.value
和。props.input.onChange
所以,我的新代码应该如下所示:
import React from 'react';
import PropTypes from 'prop-types';
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
import { noop } from '../../utils';
const ButtonGroup = ({ options, input }) => {
return (
<ToggleButtonGroup
value={input.value}
exclusive
onChange={(event, val) => { input.onChange(val); }}
>
{
options.map(option => (
<ToggleButton value={option}>
{option}
</ToggleButton>
))
}
</ToggleButtonGroup>
);
};
ButtonGroup.propTypes = {
options: PropTypes.arrayOf(PropTypes.any),
input: PropTypes.objectOf(PropTypes.any),
};
ButtonGroup.defaultProps = {
options: [],
input: {},
};
export default ButtonGroup;
用法应该保持不变。
推荐阅读
- java - 如何将一个节点插入到树路径中的另一个节点?
- hp-uft - 即使启用扩展程序后,UFT 也无法识别 Chrome 中的对象
- javascript - Axios Eject:如何进行?
- angular - Angular SyntaxError:输入意外结束
- c# - 在 C# asp.net core 2.1 中通过用户名和密码在 MQTT 服务器上对 MQTT 客户端进行身份验证
- excel - 数据输入表上的强制性字段检查
- javascript - 编写此代码的更简洁的方法[限制字符]
- javascript - 图像 (SandTimer) 动画 - HTML、CSS、Javascript
- c++ - C++ 标准是否允许未初始化的 bool 使程序崩溃?
- python - 当表格单元格为混合格式时,抓取维基百科信息框