我将react-autosuggest与自定义输入样式组件一起使用时遇到此打字稿错误。
属性类型"onChange"不兼容。类型"(event： FormEvent， params： ChangeEvent( => void" 不能分配给类型 '(event： ChangeEvent( => void'。
法典： (请注意，它不完整，只是相关部分(
// styled.ts
export const Input = styled.input`
// styles
`;
// index.tsx
function renderInput(
inputProps: Autosuggest.InputProps<SuggestionSearch>,
placeholder: string
) {
// --> error here
return <Input {...inputProps} placeholder={placeholder} />;
}
const MyComponent = () => {
const autosuggestRef = React.useRef<
Autosuggest<SuggestionSearch, SuggestionSearch>
>(null);
const onChange = (event: React.FormEvent, { newValue }: ChangeEvent) =>
setValue(newValue);
const inputProps = {
value,
onChange,
onKeyPress: onEnterPress,
};
return (
<Autosuggest
ref={autosuggestRef}
renderInputComponent={props => renderInput(props, placeholder)}
inputProps={inputProps}
// other props
/>
)
}
不确定如何解决此问题，因为自动建议更改函数会覆盖更改属性的基本输入。
我自己花了大约一整夜的时间在这个问题上。这似乎是一个错误。以下是InputProps的签名：
interface InputProps<TSuggestion>
extends Omit<React.InputHTMLAttributes<any>, 'onChange' | 'onBlur'> {
onChange(event: React.FormEvent<any>, params: ChangeEvent): void;
onBlur?(event: React.FocusEvent<any>, params?: BlurEvent<TSuggestion>): void;
value: string;
}
看来我们需要创建自己的Input组件来接受这种类型的onChange签名或将其包装在标准onChange中。
所以，这是我的方法：
const renderInputComponent = (inputProps: InputProps<TSuggestion>): React.ReactNode => {
const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>): void => {
inputProps.onChange(event, { newValue: event.target.value, method: 'type' });
};
return <Input {...inputProps} onChange={onChangeHandler} />;
}
两个潜在的错误：
- 请注意，返回的
event是React.ChangeEvent而不是React.FormEvent。细微的差异，但如果您实际使用它并且对事件足够特别，则在运行时可能会出现问题。 - 返回的
params: ChangeEvent仅考虑type事件方法。如果你想要其他的，如click，esc等...，你必须补充你自己的(例如通过onKeyUp，然后调用'onChange(...{方法： 'esc'}(
根据文档：
注意：使用 renderInputComponent 时，您仍然需要指定常用的 inputProps。Autosuggest会将您提供的inputProps与可访问性所需的其他props(例如'aria-activedescendant'(合并，并将合并的inputProps传递给renderInputComponent。
您不必这样做：
renderInputComponent={props => renderInput(props, placeholder)}
只需将placeholder直接传递到您的inputProps，即可在renderInputComponent中立即返回给您。
const inputProps = {
value,
onChange,
onKeyPress: onEnterPress,
placeholder: 'something!`
};
我的问题是renderInputComponent上的onChange((不会触发onAdviceFetchRequest。
如果我不使用自定义输入(通过renderInputComponent(，那么一切正常 - onSuggestFetchRequest 被触发并显示建议列表。
主要成分：
const MySearchBox: FC<MySearchBoxProps> = (props) => {
// Autosuggest will pass through all these props to the input.
const inputProps = {
placeholder: props.placeholder,
value: props.value,
onChange: props.onChange
};
return (
<Autosuggest
suggestions={props.suggestions}
onSuggestionsFetchRequested={props.onSuggestionsFetechRequested}
onSuggestionsClearRequested={props.onSuggestionsClearRequested}
getSuggestionValue={props.getSuggestionValue}
shouldRenderSuggestions={(value) => value.trim().length > 2}
renderSuggestion={(item: ISuggestion) => {
<div className={classes.suggestionsList}>{`${item.text} (${item.id})`}</div>;
}}
renderInputComponent={(ip: InputProps<ISuggestion>) => {
const params: InputProps<ISuggestion> = {
...ip,
onChange: props.onChange
};
return renderInput(params);
}}
inputProps={inputProps}
/>
);
};
export { MySearchBox };
自定义输入组件：
import React, { FC, ChangeEvent } from 'react';
import SearchIcon from '@material-ui/icons/Search';
import useStyles from './searchInput.styles';
import { Input } from '@material-ui/core';
type SearchInputBoxProps = {
loading?: boolean;
searchIconName: string;
minWidth?: number;
placeHolder?: string;
onChange?: (e: ChangeEvent, params: { newValue: string; method: string }) => void;
};
const SearchInputBox: FC<SearchInputBoxProps> = (props) => {
const classes = useStyles();
return (
<div className={classes.root}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<Input
placeholder={props.placeHolder}
classes={{
root: classes.inputContainer,
input: classes.inputBox
}}
inputProps={{ 'aria-label': 'search' }}
onChange={(e) => {
const params: { newValue: string; method: string } = {
newValue: e.target.value,
method: 'type'
};
console.log(`e: ${JSON.stringify(params)}`);
if (props.onChange) props.onChange(e, params);
}}
//onMouseOut={(e) => alert(e.currentTarget.innerText)}
/>
</div>
);
};
export { SearchInputBox };
渲染功能：
const renderInput = (inputProps: InputProps<ISuggestion>): React.ReactNode => {
return <SearchInputBox loading={false} onChange={inputProps.onChange} placeHolder={inputProps.placeholder} searchIconName={'search'} {...inputProps.others} />;
};
我有同样的问题。
我只需要将 HTMLElement 转换为 HTMLInputElement 像下面一样
const target = e.currentTarget as HTMLInputElement
然后，当你这样做时它工作正常
target.value