检查React / Redux中的单选按钮不起作用

sqyvllje  于 2023-06-23  发布在  React
关注(0)|答案(1)|浏览(153)

下面有人能帮忙吗?
我不知道为什么我的选中单选按钮不工作。
FFCleaning.js中的单选按钮似乎有一个bug,这部分是:
检查={appearClean === 'Y'}
我试图使用Redux来帮助实现以下目标。我试着使用状态管理,但这在课堂上似乎行不通。
FFCleaning.js:

import React, { Component } from 'react';
import {handleAppearClean } from 'redux.js'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleDoubleRight, faAngleDoubleLeft } from '@fortawesome/free-solid-svg-icons'

class FFCleaning extends Component {
  onNextClickHandler = () => {
    this.props.history.push('/ff-report/FFRepairs')
  }
  render () {
    const  {handleAppearClean, appearClean} = this.props;
    

    return (
        <div>

          <h2 style={{textDecoration: "underline"}}>Cleaning</h2>

          <label>Does this property appear to be clean?</label>
          <div>
            <input type="radio" id="appear_clean_yes" name="appear_clean" value="Y" onChange={handleAppearClean} checked={appearClean === 'Y'}></input>
            <label htmlFor="appear_clean_yes">Yes</label>

            <input type="radio" id="appear_clean_no" name="appear_clean" value="N" onChange={handleAppearClean} ></input>
            <label htmlFor="appear_clean_no">No</label>
          </div>

        </div>
    )
  }
}

FFCleaning.propTypes = {
  handleAppearClean: PropTypes.func,
  appearClean: PropTypes.string,
}

const mapDispatchToProps = dispatch => bindActionCreators({
  setClient,
  handleAppearClean
}, dispatch)

Redux.js:

const actions = {
  APPEAR_CLEAN_FLAG: 'SELECTEDFFAPPOINTMENT/APPEAR_CLEAN_FLAG',
}

const initialState = {
  appearClean: '',
}

const setAppearClean = (appearClean) => ({
  type: actions.APPEAR_CLEAN_FLAG,
  appearClean
})

const handleAppearClean = (event) => (dispatch) => {
  const { value } = event.target
  dispatch(setAppearClean(value))
}

export {
  actions,
  handleAppearClean
}
e4yzc0pl

e4yzc0pl1#

我一直在与onChange操作与单选按钮,我现在有一种黑客为它我总是使用onClick事件的单选按钮,而不是onChange,它真的帮助了我希望它能帮助你我会在这里做什么是,我会发送值直接onClick的收音机,而不是发送事件onChange让我告诉你我的意思

<input type="radio" id="appear_clean_yes" name="appear_clean" onClick={()=>handleAppearClean("Y")} checked={appearClean === 'Y'}></input>
            <label htmlFor="appear_clean_yes">Yes</label>

这将是我的onClick,而handleAppearClean函数也将被更改,因此它接收字符串值而不是事件

const handleAppearClean = (value) => (dispatch) => {
  dispatch(setAppearClean(value))
}

希望这能有所帮助

相关问题