Javascript ReactJS:更改字段的特征
我有一个表单,有三个字段 两个字段取决于第一个字段的选择。 如果第一个字段设置为true,那么其他两个字段必须禁用=false和required=true,否则相反 因此,我:Javascript ReactJS:更改字段的特征,javascript,reactjs,Javascript,Reactjs,我有一个表单,有三个字段 两个字段取决于第一个字段的选择。 如果第一个字段设置为true,那么其他两个字段必须禁用=false和required=true,否则相反 因此,我: constructor(props){ super(props); this.state = { requiredData: false } this.handleChange = this.handleChange.bind(this) } handleChange(
constructor(props){
super(props);
this.state = {
requiredData: false
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(selected){
console.log('selected', selected)
const { requiredData } = this.state
this.setState({
requiredData: selected
})
console.log('this.state',this.state)
}
render()
{
{
name: 'SelfCertification.Contract',
col: ["lg-6", 'md-6', 'sm-12'],
label: "A Contratto",
required: true,
validate: FieldValidation.required,
..._common,
CustomOnChange: selected => {
handleChange: this.handleChange(selected)}
},
{
name: 'SelfCertification.Contract.StartDate',
col: ["lg-4", 'md-4', 'sm-12'],
label: "Data Inizio",
disabled: this.state.requiredData ? false : true,
required: this.state.requiredData ? true : false,
component: Fields.Text,
},
{
name: 'SelfCertification.Contract.EndDate',
col: ["lg-4", 'md-4', 'sm-12'],
label: "Data Fine",
disabled: this.state.requiredData ? false : true,
required: this.state.requiredData ? true : false,
component: Fields.Text,
},
//...
}
现在使用此代码,因此如果将其设置为选中的true(在SelfCertification.Contract
中),则字段(SelfCertification.Contract.StartDate,SelfCertification.Contract.EndDate
)正确disable:false/required:true
但是如果我在字段中写入,SelfCertification.Contract
的单选按钮就会消失。
而且,如果我再次更改我的第一个选择,字段不会返回到状态disable:true/required:false
我该怎么办
我想要得到的:
Field1 (SelfCertification.Contract):
o Yes
o No
Field2 (SelfCertification.Contract.StartDate or SelfCertification.Contract.EndDate)
disabled: true,
required: false.
Field1 (SelfCertification.Contract):
X Yes
o No
Field2 (SelfCertification.Contract.StartDate or SelfCertification.Contract.EndDate)
disabled: false,
required: true.
Field1 (SelfCertification.Contract):
o Yes
X No
Field2 (SelfCertification.Contract.StartDate or SelfCertification.Contract.EndDate)
disabled: true,
required: false.