如何处理另一个 if 条件中的条件 if 条件不起作用在 reactjs 中除外

Question

我已经实现了这个条件，但结果不是预期的。当我第一次单击它时，它工作正常，但当我来回切换时它不起作用。当我单击"是"时，它显示"否"选择结果，有时什么都没有。

Handler(){
if (document.getElementById("Yes").checked) {
this.setState({
isHiddenYes: !this.state.isHiddenYes
});
console.log("hello yes");
} else {
this.setState({
isHiddenNo: !this.state.isHiddenNo
});
console.log("hello no");
}
};
<div className="textBlock" onChange={this.Handler}>
<div><input type="radio" name="List" id="Yes" value="Yes" required />Yes</div>
<div><input type="radio" name="List" id="No" value="No" />No</div>
{
(this.state.isHiddenYes) ?
(
<div className="subtitle1">
<div className="input">
<div><input type="radio" name="L1" id="1" value="1" required />1</div>
<div><input type="radio" name="L1" id="2" value="2" />2</div>
</div>
</div>
<div className="subtitle2">
<div className="input">
<div><input type="radio" name="R1" id="1" value="3" required />3</div>
<div><input type="radio" name="R1" id="2" value="4" />4</div>
</div>
</div>) :
''
}
{
(this.state.isHiddenNo) ?
(<div className="No">
<div className="inputIcon" onClick={this.Onclick}>
<input className="subtitle3" type="text" />
</div>
{
(this.state.isHiddenX) ?
(<div className="radio">
<fieldset>
<div><input type="radio" name="LR1" id="1" value="1" required />1</div>
<div><input type="radio" name="LR1" id="2" value="2" />2</div>
</fieldset>
</div>) : ''
}
<div className="inputIcon" onClick={this.Onclick}>
<input className="subtitle4" type="text" />
</div>
{
(this.state.isHiddenY) ?
(<div className="Radio">
<fieldset>
<div><input type="radio" name="LR2" id="3" required />3</div>
<div><input type="radio" name="LR2" id="4" />4</div>
</fieldset>
</div>) : ''
}
</div>)
: ''
}
</div>

不确定我的做法是否正确。

基本上当我单击"是"==>时，我需要显示一些代码，但是当我单击"否"==>需要显示不同的代码段。就我而言，当我第一次单击时，它工作正常，但在"是"和"否"选择上来回切换时，它无法正常工作。

错误：1.(有时它显示 是 没有一段代码 2.( 有时空白什么都没有显示 3.(当我单击"否"时，它会显示正确的代码(当我选择其中任何一个时(-->它将我带到"是"一段代码。

Answer 1

我不喜欢对这种事情使用onChange方法，最好是onClick方法来处理这件事。但在下面的示例中，我使用了onChange方法。

尝试使用此代码，希望您能理解：

import React, { Component } from 'react';
const { Fragment } = React;
class App extends Component {
constructor(props) { 
super();
this.state = {
isHiddenYes: true,
isHiddenNo: true,
isHiddenX: false,
isHiddenY: false,
}
this.handler = this.handler.bind(this);
}

handler() {
if (document.getElementById('Yes').checked) {
this.setState({
isHiddenYes: !this.state.isHiddenYes
});
console.log("hello yes");
} else {
this.setState({
isHiddenNo: !this.state.isHiddenNo
}); console.log("hello no");
}
}
render() {
return (
<Fragment>
<div className="textBlock" onChange={this.handler} >
<div><input type="radio" name="List" id="Yes" value="Yes"  required/>Yes</div>
<div><input type="radio" name="List" id="No" value="No" />No</div>
{
(this.state.isHiddenYes) ?
(
<Fragment>
<div className="subtitle1">
<div className="input">
<div><input type="radio" name="L1" id="1" value="1"  required/>1</div>
<div><input type="radio" name="L1" id="2" value="2" />2</div>
</div>
</div>
<div className="subtitle2">
<div className="input"><div><input type="radio" name="R1" id="1" value="3"  required/>3</div>
<div><input type="radio" name="R1" id="2" value="4"/>4</div>
</div>
</div>
</Fragment>
) :
''
}
{
(this.state.isHiddenNo) ?
(
<div className="No">
<div className="inputIcon" onClick={this.Onclick}>
<input className="subtitle3" type="text"/>
</div>
{this.state.isHiddenX ?
(
<div className="radio">
<fieldset>
<div><input type="radio" name="LR1" id="1" value="1"  required/>1</div>
<div><input type="radio" name="LR1" id="2" value="2" />2</div>
</fieldset>
</div>
) : ''
}
<div className="inputIcon" onClick={this.Onclick}>
<input className="subtitle4" type="text"/>
</div>
{this.state.isHiddenY ?
(<div className="Radio">
<fieldset>
<div><input type="radio" name="LR2" id="3"  required/>3</div>
<div><input type="radio" name="LR2" id="4"  />4</div>
</fieldset>
</div>
) : ''
}
</div>
)
: ''
}
</div>
</Fragment>
);
}
}
export default App;

更新

像这样更改处理程序：

handler() {
if (document.getElementById('Yes').checked) {
this.setState({
isHiddenYes: !this.state.isHiddenYes,
isHiddenNo: false,
});
console.log("hello yes");
} else {
this.setState({
isHiddenNo: !this.state.isHiddenNo,
isHiddenYes: false
}); console.log("hello no");
}

像这样更改构造函数：

constructor(props) { 
super();
this.state = {
isHiddenYes: false,
isHiddenNo: false,
isHiddenX: false,
isHiddenY: false,
}
this.handler = this.handler.bind(this);
}

Answer 2

你必须将JSX元素包装在一个封闭的标签中

喜欢这个

{true ? (
<div>
<div> </div>
<div> </div>
</div>
) : (
""
)}

不能这样

{true ? (
<div> </div>
<div> </div>
) : (
""
)}

更新

不建议直接操作 DOM，React 不适合这样做

而不是这个

Handler(){
if (document.getElementById("Yes").checked) {
this.setState({
isHiddenYes: !this.state.isHiddenYes
});
console.log("hello yes");
} else {
this.setState({
isHiddenNo: !this.state.isHiddenNo
});
console.log("hello no");
}
};

你可以这样做

onRadioButtonChange = e => {
const { value } = e.target;
console.log(value);
if (value === "Yes") {
this.setState({
isHidden: true
});
console.log("hello yes");
} else {
this.setState({
isHidden: false
});
console.log("hello no");
}
};

并将onRadioButtonChange添加到您的无线电元素中喜欢这个

<div>
<div>
<input
onChange={this.onRadioButtonChange}
type="radio"
name="List"
value="Yes"
required
/>Yes
</div>
<div>
<input
onChange={this.onRadioButtonChange}
type="radio"
name="List"
value="No"
/>No
</div>
{this.state.isHidden ? (
<h1>Hidden Yes Element</h1>
) : (
<h1>Hidden No Element</h1>
)}
</div>

在这里，您的代码具有正确的格式 https://codesandbox.io/embed/6v2p1wl25k

Answer 3

事件onChange={this.Handler}应该在两个输入type="radio" name="List"而不是在div

。

Answer 4

setState 是异步的。您需要以这种方式记录它：

this.setState({ isHiddenYes: !this.state.isHiddenYes },
() => { console.log(`isHiddenYes changed to ${this.state.isHiddenYes}`)} );

此外，您只能根据 true 和 false 来评估您的回报，只需将 isHidden 作为您的状态，而不是为"是"和"否"调用多个 setState。

例如：

class App extends Component {
constructor() { 
super();
this.state = {
isHidden: true
}
/*some code logic*/
return (
isHidden ? <div>'This is True'</div>
: <div>'This is False'</div>
)

或者，如果您不想显示任何内容，除非单击：

return (
isHidden ? <div>'This is True'</div>
: !isHidden ? <div>'This is False'</div>
: null
)