我的应用程序将会形成一个重量级,我希望尽可能多地控制,同时尽可能少地使用依赖项。为此,我想利用redux-form v6的自定义Field组件API,并制作一堆我可以随意放入的自定义组件。其中一个组件是下拉选择。
问题是自定义下拉组件未连接到状态,即使它呈现正常。
在文档中,示例完成此操作:
<div className="form-group">
<label htmlFor="dropDownSelect">Select an Option</label>
<Field
name="dropDownSelect"
component={DropDownSelect}
people={people}
className="form-control"
>
</Field>
</div>
我正在寻找一种即插即用的方法,我可以放入一个组件,并在道具中输入一组数据:
Form.js :
import React from 'react';
import styles from './styles.css';
class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function
renderSelectOptions = (person) => {
return (
<option key={person} value={person}>{person}</option>
);
}
render() {
return (
<select>
{this.props.people.map(this.renderSelectOptions)}
</select>
);
}
}
export default DropDownSelect;
DropDownSelect.js:
function DropDownSelect(person) {
return (
<option key={person} value={person}>{person}</option>
);
}
export default DropDownSelect;
<div className="form-group">
<label htmlFor="dropDownSelect">Select an Option</label>
<Field
name="dropDownSelect"
component="select"
// component={DropDownSelect}
// people={people}
className="form-control"
>
{people.map(DropDownSelect)}
</Field>
当我检查Redux DevTools时,字段的值在与下拉列表交互时永远不会填充:
我为两个字段选择了一个值,但只有'effDate'填充了一个值,而'dropDownSelect'仍然是一个没有值的注册字段。
修改
根据这个例子,我想要解决这个问题的方法就像:
Base
这暂时适用,但如果我可以将其作为一个完全独立的组件实现(如初始问题中所述),那将是理想的,所以我可以利用生命周期钩子,因为该字段将依赖于其他字段
答案 0 :(得分:14)
要制作处理下拉选择的单独自定义组件,我需要包含&#39;输入&#39;用于将其连接到表单缩减器的道具:
自定义组件:
/**
*
* DropDownSelect
*
*/
import React from 'react';
import styles from './styles.css';
class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function
renderSelectOptions = (person) => (
<option key={person} value={person}>{person}</option>
)
render() {
const { input, label } = this.props;
return (
<div>
{/* <label htmlFor={label}>{label}</label> */}
<select {...input}>
<option value="">Select</option>
{this.props.people.map(this.renderSelectOptions)}
</select>
</div>
);
}
}
// function DropDownSelect(person) {
// return (
// <option key={person} value={person}>{person}</option>
// );
// }
DropDownSelect.propTypes = {
people: React.PropTypes.array,
input: React.PropTypes.object,
label: React.PropTypes.string,
};
export default DropDownSelect;
字段:
<div className="form-group">
<label htmlFor="dropDownSelect">Select an Option</label>
<Field
name="dropDownSelect"
// component="select"
label="dropDownSelect"
component={DropDownSelect}
people={people}
className="form-control"
>
{/* {people.map(DropDownSelect)} */}
</Field>
</div>