অভিযোজিত সালার JSX করতে এর উত্তর এবং প্রতিক্রিয়া দেখায়, আমি লক্ষ্য করেছি যে প্রতিক্রিয়া নির্বাচন শুধু একটি মত আচরণ করে না<input/>
বৈধতা সংক্রান্ত ক্ষেত্র। স্পষ্টতই, কেবলমাত্র কাস্টম বার্তাটি দেখানোর জন্য এবং অসুবিধাগুলির সময় এটিকে প্রদর্শন থেকে বাঁচানোর জন্য বেশ কয়েকটি কাজের ক্ষেত্র প্রয়োজন।
আমি এখানে একটি ইস্যু উত্থাপন করেছি , যদি এটি কিছু সাহায্য করে। এখানে একটি কার্যকারী উদাহরণ সহ একটি কোডস্যান্ডবক্স এবং সেখানকার সর্বাধিক গুরুত্বপূর্ণ কোডটি এখানে পুনরুত্পাদন করা হয়েছে:
Hello.js
import React, { Component } from "react";
import SelectValid from "./SelectValid";
export default class Hello extends Component {
render() {
return (
<form>
<SelectValid placeholder="this one is optional" />
<SelectValid placeholder="this one is required" required />
<input
required
defaultValue="foo"
onChange={e => e.target.setCustomValidity("")}
onInvalid={e => e.target.setCustomValidity("foo")}
/>
<button>button</button>
</form>
);
}
}
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 (
<Select
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}
/>
);
}
}