时间戳

首页 > 解决方案 > 无线电输入在 reactjs 中被冻结

javascript - 无线电输入在 reactjs 中被冻结

问题描述

我在 JSX 中有一个单选输入按钮，如下所示。

import React, { Component, useState, useEffect, useRef } from 'react';
import { Link, Redirect } from 'react-router-dom';
import { useDispatch, connect } from 'react-redux';

import { updateReviewAction } from '../actions/dashboard';

const EditReviewComponent = (props) => {
  const [role, setRole] = useState(null);
  const [message, setMessage] = useState('');
  const [isMessage, setIsMessage] = useState(false);
  const [jobKnowledge, setJobKnowledge] = useState('');
  const [productivity, setProductivity] = useState('');
  const [workQuality, setWorkQuality] = useState('');
  const [skills, setSkills] = useState('');

  const dispatch = useDispatch();

  const onUpdateReview = (event) => {
    event.preventDefault();

    let reviewID = props.viewReviews.response._id;

    dispatch(updateReviewAction({ reviewID, jobKnowledge, productivity, workQuality, skills }));

    setMessage('');
    setIsMessage(true);
  }

  console.log(props.viewReviews);

  const onRoleChange = event => {
    setRole(event.target.value);
  }

  const onJobKnowledgeChange = event => {
    setJobKnowledge(event.target.value);
  }

  const onProductivityChange = event => {
    setProductivity(event.target.value);
  }

  const onWorkQualityChange = event => {
    setWorkQuality(event.target.value);
  }

  const onSkillsChange = event => {
    setSkills(event.target.value);
  }

  const resetMessage = () => {
    setIsMessage(false);
  }

    return (
    <div className='employees'>
      <Link to={`${props.url}`}>Close</Link>
      <h3>Edit New Employee</h3>
      <p>{(message !== '' && isMessage) ? message : ''}</p>
      <form onSubmit={onUpdateReview}>
        <div>
          <p>Job Knowledge</p>
          <label htmlFor="excellent_knowledge">
            <input
              type="radio"
              name="job_knowledge"
              id="excellent_knowledge"
              value="Excellent"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.jobKnowledge === 'Excellent')
                ? true
                : false
              }
              onChange={onJobKnowledgeChange}
              required
            />
            Excellent
          </label>
          <label htmlFor="good_knowledge">
            <input
              type="radio"
              name="job_knowledge"
              id="good_knowledge"
              value="Good"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.jobKnowledge === 'Good')
                ? true
                : false
              }
              onChange={onJobKnowledgeChange}
              required
            />
            Good
          </label>
          <label htmlFor="fair_knowledge">
            <input
              type="radio"
              name="job_knowledge"
              id="fair_knowledge"
              value="Fair"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.jobKnowledge === 'Fair')
                ? true
                : false
              }
              onChange={onJobKnowledgeChange}
              required
            />
            Fair
          </label>
          <label htmlFor="poor_knowledge">
            <input
              type="radio"
              name="job_knowledge"
              id="poor_knowledge"
              value="Poor"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.jobKnowledge === 'Poor')
                ? true
                : false
              }
              onChange={onJobKnowledgeChange}
              required
            />
            Poor
          </label>
        </div>
        
        <div>
          <p>Productivity</p>
          <label htmlFor="excellent_productivity">
            <input
              type="radio"
              name="productivity"
              id="excellent_productivity"
              value="Excellent"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.productivity === 'Excellent')
                ? true
                : false
              }
              onChange={onProductivityChange}
              required
            />
            Excellent
          </label>
          <label htmlFor="good_productivity">
            <input
              type="radio"
              name="productivity"
              id="good_productivity"
              value="Good"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.productivity === 'Good')
                ? true
                : false
              }
              onChange={onProductivityChange}
              required
            />
            Good
          </label>
          <label htmlFor="fair_productivity">
            <input
              type="radio"
              name="productivity"
              id="fair_productivity"
              value="Fair"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.productivity === 'Fair')
                ? true
                : false
              }
              onChange={onProductivityChange}
              required
            />
            Fair
          </label>
          <label htmlFor="poor_productivity">
            <input
              type="radio"
              name="productivity"
              id="poor_productivity"
              value="Poor"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.productivity === 'Poor')
                ? true
                : false
              }
              onChange={onProductivityChange}
              required
            />
            Poor
          </label>
        </div>
        <div>
          <p>Work Quality</p>
          <label htmlFor="excellent_quality">
            <input
              type="radio"
              name="quality"
              id="excellent_quality"
              value="Excellent"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.workQuality === 'Excellent')
                ? true
                : false
              }
              onChange={onWorkQualityChange}
              required
            />
            Excellent
          </label>
          <label htmlFor="good_quality">
            <input
              type="radio"
              name="quality"
              id="good_quality"
              value="Good"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.workQuality === 'Good')
                ? true
                : false
              }
              onChange={onWorkQualityChange}
              required
            />
            Good
          </label>
          <label htmlFor="fair_quality">
            <input
              type="radio"
              name="quality"
              id="fair_quality"
              value="Fair"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.workQuality === 'Fair')
                ? true
                : false
              }
              onChange={onWorkQualityChange}
              required
            />
            Fair
          </label>
          <label htmlFor="poor_quality">
            <input
              type="radio"
              name="quality"
              id="poor_quality"
              value="Poor"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.workQuality === 'Poor')
                ? true
                : false
              }
              onChange={onWorkQualityChange}
              required
            />
            Poor
          </label>
        </div>
        <div>
          <p>Technical Skills</p>
          <label htmlFor="excellent_skills">
            <input
              type="radio"
              name="skills"
              id="excellent_skills"
              value="Excellent"
              checked={
                (
                  props.viewReviews.hasOwnProperty('response') && 
                  props.viewReviews.response.skills === 'Excellent'
                )
              }
              onChange={onSkillsChange}
              required
            />
            Excellent
          </label>
          <label htmlFor="good_skills">
            <input
              type="radio"
              name="skills"
              id="good_skills"
              value="Good"
              checked={
                (
                  props.viewReviews.hasOwnProperty('response') && 
                  props.viewReviews.response.skills === 'Good'
                )
              }
              onChange={onSkillsChange}
              required
            />
            Good
          </label>
          <label htmlFor="fair_skills">
            <input
              type="radio"
              name="skills"
              id="fair_skills"
              value="Fair"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.skills === 'Fair')
              }
              onChange={onSkillsChange}
              required
            />
            Fair
          </label>
          <label htmlFor="poor_skills">
            <input
              type="radio"
              name="skills"
              id="poor_skills"
              value="Poor"
              checked={
                (props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.skills === 'Poor')
              }
              onChange={onSkillsChange}
              required
            />
            Poor
          </label>
        </div>
        <div>
          <button>Update</button>
        </div>
      </form>
    </div>
  );
}

const mapStateToProps = state => (state);

export default connect(mapStateToProps)(EditReviewComponent);

如您所见，我正在按条件检查它们。在这种情况下，它们会得到适当的检查。但是，当我尝试单击另一个单选按钮时，它不再被选中。单选按钮被冻结。

我做错了什么，我该如何解决。

更新

我更新了整个组件。请让我知道该怎么做。

标签： javascriptreactjsjsx

解决方案

选中的属性表示要从单选按钮列表中选择的默认值。在您的代码中，您尝试checked从props传递到组件中进行设置，但这不是您在单击其中一个单选按钮时要更新的内容。

单击单选按钮时，您将使用以下内容更新状态：

const [jobKnowledge, setJobKnowledge] = useState('');
const [productivity, setProductivity] = useState('');
const [workQuality, setWorkQuality] = useState('');

因此，与其确定checkedfrom的值props，不如尝试使用这些状态变量来确定它，我认为它对你有用。

<input
  type="radio"
  name="job_knowledge"
  id="excellent_knowledge"
  value="Excellent"
  checked={jobKnowledge === "Excellent"}
  onChange={onJobKnowledgeChange}
  required
/>

PS：根据您检查此变量值的方式：

props.viewReviews.hasOwnProperty('response') && props.viewReviews.response.jobKnowledge === 'Excellent'

您可能想查看可选链接

推荐阅读