问题描述
我不明白为什么当我想第二次点击它时我的复选框没有取消选中。我可以选中但不能取消选中...我使用 typescript react 和 next.js。 有人可以帮助我吗？ 第一部分是我调用句柄时，第二部分是我使用表单时。
我必须第一次在块状态中描述我的所有状态，第二次在构造函数中描述。
export interface IdFormBlockProps {
}
export interface IdFormBlockState{
user: string;
email: string;
enterprise: string;
tel: number;
speakProject: string;
checked1: boolean;
checked2: boolean;
checked3: boolean;
checked4: boolean;
budget: string ;
budgets: string[];
kNowledge: string;
kNowledges: string[];
contactEmail: string;
contactTel: string;
}
export default class Form extends React.Component <IdFormBlockProps,IdFormBlockState>{
constructor(props){
super(props);
this.state = {
user :"",email : "",enterprise : "",tel : null,speakProject: "",checked1: false,checked2: false,checked3: false,checked4: false,budget: "",budgets: ["Sélectionnez par tranche","< 1000€","< 2000€","< 3000€"," > 3000€"],// I give the value for the budget form
kNowledge: "",kNowledges: ["Sélectionnez","Facebook","Instagram","linkedIn","un moteur de recherche"],// I give the value for the kNowledge form
contactEmail: "",contactTel: "",}
this.handleCheckBoxChange = this.handleCheckBoxChange.bind(this);
this.handleContacting = this.handleContacting.bind(this);
this.handleKNowledge = this.handleKNowledge.bind(this);
this.handleProject = this.handleProject.bind(this);
this.handleBudget = this.handleBudget.bind(this);
this.handleUser = this.handleUser.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
};
handleCheckBoxChange = (event,index) => {
let key = "checked"+index;
this.setState({[key]:event.target.value} as IdFormBlockState )
console.log(event.target)
}
{/* .............this is the block where the user says what he needs.................................. */}
<div className="checkBoxNeeds">
<fieldset>
<legend className="yourNeed">De quoi avez-vous besoin ?</legend>
<div className="newProject">
<label htmlFor="newproject">Je souhaite lancer un nouveau projet !</label>
<input
type="checkBox"
id="newProject"
name="yourNeed[]"
checked={this.state.checked1}
onChange={(event) => this.handleCheckBoxChange(event,1)}/>
</div>
<div className="boostActivity">
<label htmlFor="boostActivity">Je souhaite booster mon activité !</label>
<input
type="checkBox"
id="boostActivity"
name="yourNeed[]"
checked={this.state.checked2}
onChange={(event) => this.handleCheckBoxChange(event,2)}/>
</div>
<div className="content">
<label htmlFor="content">Je souhaite alimenter mon contenu</label>
<input
type="checkBox"
id="content"
name="yourNeed[]"
checked={this.state.checked3}
onChange={(event) => this.handleCheckBoxChange(event,3)}/>
</div>
<div className="content2">
<label htmlFor="content2">Je souhaite alimenter mon contenu,encore...</label>
<input
type="checkBox"
id="content2"
name="yourNeed[]"
checked={this.state.checked4}
onChange={(event) => this.handleCheckBoxChange(event,4)}/>
</div>
</fieldset>
</div>
解决方法
使用 event.target.checked 而不是 value。
这是一个与值不同的布尔值，您没有设置它并成为字符串。
这是一个简单的例子： https://codesandbox.io/s/exciting-dan-m9wxb
<input
type="checkbox"
checked={checked}
onClick={(e) => setChecked(e.target.checked)}
/>