Question

我非常困惑，当用户取消选中单选按钮（意味着用户检查了另一个收音机）时，我找不到一种可以更改图像的方法

代码：

handleCheckbox = e => {

    let target = e.target;
    let targetName = !target.type ? e.target.getAttribute('name') : e.target.getAttribute('value')

        if (targetName == 'bstFbBtn' ) {
            if ( target.checked) {
                target.nextSibling.src = fbColorSVG

            } 
            else {
                target.nextSibling.src = fbGreySVG
            }                
        }
    }

<label>
     <input type="radio" onChange={e => this.handleInputChange(e)}  style={Style.checkBox} value="bstFbBtn" name="bestReach" />
     <img src={fbGreySVG} name="bstFbBtn" style={Style.icon}/>                            
</label>

该代码的问题在于，它不会捕获未选中的元素的时间（因为偶数已经通过了），而当我返回它时，图像是相同的，因为，再次检查了它。我知道我的逻辑在这里是错误的。有什么办法做对吗？

Answer 1

您可以根据单选按钮的点击使用状态来设置图像的src

 handleCheckbox = e => {
        let target = e.target;
        let targetName = !target.type ? e.target.getAttribute('name') : e.target.getAttribute('value')
            if (targetName == 'bstFbBtn' ) {
                if ( target.checked) {
                    this.setState({src:fbColorSVG})
                } 
                else {
                    this.setState({src:fbGreySVG})
                }                
            }
        }

然后在render方法中，源可以表示为

render() {
    <label>
         <input type="radio" onChange={e => this.handleInputChange(e)}  style={Style.checkBox} value="bstFbBtn" name="bestReach" />
         <img src={this.state.src} name="bstFbBtn" style={Style.icon}/>                            
    </label>
}

Answer 2

好，所以我设法找到了解决方案，如果有人遇到此问题，您可以这样做：

this.stete = {
  ...
  checked: {
    ...
    fb:false,
    ...
  }
  ...
}

handleCheckbox = e => {

    let target = e.target;
    let targetName = !target.type ? e.target.getAttribute('name') : e.target.getAttribute('value') 


    if (targetName == 'bstFbBtn' ) {
        let { checked } = this.state;
        checked.fb = true;
        this.setState({checked}, () => {
            let { checked } = this.state;
            for (let key in checked) {
                if (key != 'fb') {
                    checked[key] = false;
                }
            }
            console.log(checked)
            this.setState({checked:checked})
        })
    }
}
<label>
     <input type="radio" onChange={e => this.handleInputChange(e)}  style={Style.checkBox} value="bstFbBtn" name="bestReach" />
 {
     this.state.checked.fb ?  
     <img src={fbColorSVG} name="bstFbBtn" style={Style.icon}/> :
     <img src={fbGreySVG} name="bstFbBtn" style={Style.icon}/> 
 }

</label>

检查属性到未选中单选按钮上的另一个元素

2 个答案: