我正在尝试使用一个自定义组件作为react-select中的输入字段。因为我需要验证,所以我尝试使用HTML5 oninvalid
(JSX中的onInvalid
)作为我的输入标记,并为oninvalid
设置自定义消息。但是,我无法将消息作为 prop 传递给我在select中设置的组件。以下是我的代码。
Input.js
import React from "react";
import { components } from "react-select";
export default class Input extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log("component mounted");
}
setInvalidMessage = event => {
event.target.setCustomValidity("Custom Message");
};
render() {
if (this.props.isHidden) {
return <components.Input {...this.props} />;
}
return (
<components.Input
{...this.props}
required
onInvalid={this.setInvalidMessage}
/>
);
}
}
example.js
import React from "react";
import Input from "./Input";
import Select from "react-select";
import { colourOptions } from "./docs/data";
const InputBoxWithText = props => {
return <Input {...props} />;
};
export default () => (
<form>
<Select
closeMenuOnSelect={true}
components={{ InputBoxWithText }}
options={colourOptions}
/>
<input type="submit" />
</form>
);
如果我在组件属性中传递Input,我会在Input.js中得到硬编码消息。如果我传递InputBoxWithText,我根本看不到Input挂载。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Example from './example';
ReactDOM.render(
<Example />,
document.getElementById('root')
);
这里是CodeSandBox.io URL。
谁能告诉我我做错了什么。
5条答案
按热度按时间vqlkdk9b1#
最好通过select传递自定义 prop :
为避免每次Select更新时重新创建自定义组件,可能导致意外错误的原因。
qni6mghb2#
在我的例子中,我是这样传递错误的:
然后像colourStyles方法中的
selectProps.selectProps.errors
一样访问它。0s7z1bwu3#
我设法通过我的自定义 prop 使用箭头函数
有关定义组件,请参见文档
lawou6xi4#
我没有解决方案(我也在寻找同样的东西),但你的例子有多个错误。
要加载输入,必须写入
components={{ Input: InputBoxWithText }}
,因为Input
的组件名称不是InputBoxWithText
。此外,
onInvalid
似乎不是Input
API的一部分,所以它永远不会触发。您是否正在尝试使用<input oninvalid="" />
..?ecfsfe2w5#
在版本5中,将自定义 prop 与typescript一起使用的唯一方法是使用模块扩充。
所以在我的项目中,我打开react-app-env.d.ts并添加了以下内容:
将该 prop 传递给选择对象,如下所示:
并在自定义组件中使用它,如下所示:
文件:https://react-select.com/typescript#custom-select-props