我有一个字段&:not(:last-child):after
,用户输入内容并在每个用户击键上显示一个下拉列表,其中包含数组AskQuestions
中的更新结果。但是,当用户点击某个字段时,我会尝试通过companyOptions
清除当前字段的值,但这似乎不可能。
this.props.dispatch(change..))
这是我的renderField
<Field
name="company"
type="text"
onBlur={this.onClearSearch}
keyUp={this.renderCompanyList}
component={renderField}
label="Choose Company..."/>
我有以下回调关联,但this.props.dispatch不会重置该字段。
function renderField(field) {
const { meta: {touched, error} } = field;
return(
<div>
<input type={field.type}
placeholder={field.label}
onKeyUp={field.keyUp ? () => {field.keyUp(field.input.value)} : ""}
onBlur={field.onBlur ? () =>{field.onBlur()} : ""}
{...field.input}
// I also tried putting in after ...input
// onBlur={field.onBlur ? () =>{field.onBlur()} : ""}
/>
<div className="text-danger">
{touched ? error : ''}
</div>
</div>
);
}
答案 0 :(得分:2)
这是因为有一个默认事件onBlur
在您的函数onClearSearch修改后修改了输入的值,
在e.preventDefault()
末尾添加onClearSearch
必须解决您的问题,如下所示:
onClearSearch(e){
const {companyOptions} = this.state;
if (companyOptions.length){
var company = companyOptions[0];
this.props.dispatch(change('AskQuestion','company',company.label));
}
else {
this.props.dispatch(change('AskQuestion','company',''));
}
// hides the dropdown view
this.setState({showCompanySearch:false})
// here
e.preventDefault();
}
我希望这可以帮到你