html5推送消息java,HTML5表单必需属性 . 设置自定义验证消息？

适应Salar 's answer to JSX and React, I noticed that React Select doesn' t的行为就像验证的 字段一样 . 显然，需要一些变通方法来显示自定义消息并防止它在不方便的时候显示 .

我提出了一个问题here，如果有什么帮助的话 . Here是一个带有工作示例的CodeSandbox，其中最重要的代码在此处再现：

Hello.js

import React, { Component } from "react";

import SelectValid from "./SelectValid";

export default class Hello extends Component {

render() {

return (

required

defaultValue="foo"

onChange={e => e.target.setCustomValidity("")}

onInvalid={e => e.target.setCustomValidity("foo")}

/>

button

);

}

}

SelectValid.js

import React, { Component } from "react";

import Select from "react-select";

import "react-select/dist/react-select.css";

export default class SelectValid extends Component {

render() {

this.required = !this.props.required

? false

: this.state && this.state.value ? false : true;

let inputProps = undefined;

let onInputChange = undefined;

if (this.props.required) {

inputProps = {

onInvalid: e => e.target.setCustomValidity(this.required ? "foo" : "")

};

onInputChange = value => {

this.selectComponent.input.input.setCustomValidity(

value

? ""

: this.required

? "foo"

: this.selectComponent.props.value ? "" : "foo"

);

return value;

};

}

return (

onChange={value => {

this.required = !this.props.required ? false : value ? false : true;

let state = this && this.state ? this.state : { value: null };

state.value = value;

this.setState(state);

if (this.props.onChange) {

this.props.onChange();

}

}}

value={this && this.state ? this.state.value : null}

options={[{ label: "yes", value: 1 }, { label: "no", value: 0 }]}

placeholder={this.props.placeholder}

required={this.required}

clearable

searchable

inputProps={inputProps}

ref={input => (this.selectComponent = input)}

onInputChange={onInputChange}

/>

);

}

}