文章/答案/技术大牛

发布

社区首页 >问答首页 >单选按钮反应矩阵

问单选按钮反应矩阵
EN

Stack Overflow用户

提问于 2020-10-23 22:29:48

回答 2查看 305关注 0票数 2

我试着解决这个js反应问题，然后被问题2-4困住了。问题2:我不知道如何检查每一行的本地状态，以检查重复的等级选择问题3:是否需要传递给组件的道具来检查是否唯一？问题4:我如何检查所有行都有一个选择排序和唯一的行？

以下是问题：

将“完成”类添加到行中将突出显示为绿色。对具有选定等级的行提供此视觉反馈。
将“错误”类添加到行将突出显示为红色。对已选择重复等级的行提供此视觉反馈。
在submit按钮附近有一个显示错误消息的地方。当用户在多行上选择相同的等级时，请显示此错误消息：Ranks must be unique。
默认情况下，“提交”按钮被禁用。当所有行都选择了一个秩，并且所有选定的级别都是唯一的时，启用它。

原生质App.js

import React, { Component } from 'react';
import './App.css';
import MainPage from './components/MainPage';

class App extends Component {
  render() {
    return (
      <MainPage />
    );
  }
}

export default App;

MainPage.js

import React from 'react';
import _ from 'lodash';
import FormRow from './FormRow.jsx';
import Animal from './Animal.js';

class MainPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animals: ['panda','cat','capybara','iguana','muskrat'].map((name) => {
        return new Animal(name);
      }),
      error: ''
    };
  }


  render() {
    const rows = this.state.animals.map((animal) => {
      return (
        <FormRow
          animalName={animal.name}
          key={animal.name}
        />
      );
    });

    const headers = _.range(1, 6).map((i) => <th key={`header-${i}`}>{i}</th>);

    return (
      <div>
        <table>
          <thead>
            <tr>
              <th></th>
              {headers}
            </tr>
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>
        <div>{this.state.error}</div>
        <input type="submit" />
      </div>
    );
  }
}

export default MainPage;

FormRow.jsx

import React from 'react';
import _ from 'lodash';

class FormRow extends React.Component {
  render() {
    const cells = _.range(1, 6).map((i) => {
      return (
        <td key={`${this.props.animalName}-${i}`}>
          <input
            type="radio"
            name={this.props.animalName}
            value={i}
          />
        </td>
      );
    });

    return (
      <tr>
        <th>{this.props.animalName}</th>
        {cells}
      </tr>
    )
  }
}

export default FormRow;

Animal.js

class Animal {
  constructor(name, rank) {
    this.name = name;
    this.rank = rank;
  }
}

export default Animal;

我的代码在(git@github.com:HuydDo/js_react_problem-.git). GitHub谢谢你的建议！

FormRow.jsx

import React from 'react';
import _ from 'lodash';

class FormRow extends React.Component {

  constructor(){
    super();
    this.state = {
      rowColor : false,
      name: "",
      rank: 0
        // panda: 0,
        // cat:  0,
        // capybara: 0,
        // iguana:  0,
        // muskrat:  0
    }
  }

  handleChange = (e) => {
    if (this.state.rank === e.target.value){
      console.log("can't select same rank.")
    }
    console.log(e.target.name)
    console.log(e.target.value)
    this.setState({
      // [e.target.name]: e.target.value,
      name: e.target.name,
      rank: e.target.value,
      rowColor: true
    }, console.log(this.state))
  }
  
  handleChange2 = (e) => {
    let newName = e.target.name
    let newRank = e.target.value
    let cRank = this.state.rank
    let cName = this.state.name
    console.log(this.state)
    console.log(`${newRank} ${newName}`)

    if(cName !== newName) {
      if(cRank !== newRank) {
        this.setState({
         name : newName,
         rank: newRank,
         rowColor: true
        },()=> console.log(this.state))
      }
      else {
        console.log("can't select same rank")
      }
    }

    //  this.setState(previousState => {
       
    //    let cRank = previousState.rank
    //    let cName = previousState.name
    //    console.log(previousState) 

    //    return {
    //       rank: newRank,
    //       name: newName,
    //       rowColor: true
    //      }
    //  },console.log(this.state.rank))
  }

  render() {
    const cells = _.range(1, 6).map((i) => {
      return (
        <td key={`${this.props.animalName}-${i}`} onChange={this.handleChange2}>
          <input 
            type="radio"
            name={this.props.animalName}
            value={i}
          /> 
        </td>
      );
    });

    return (
     
      <tr className = {(this.state.rowColor) ? 'done':null}  >
      {/* <tr> */}
        <th>{this.props.animalName}</th>
        {cells}
      </tr>
    )
  }
}

export default FormRow;

MainPage.jsx

import React from 'react';
import _ from 'lodash';
import FormRow from './FormRow.jsx';
import Animal from './Animal.js';

class MainPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animals: ['panda','cat','capybara','iguana','muskrat'].map((name) => {
        return new Animal(name);
      }),
      error: ''
    };
  }

  getValue = ({name,rank}) =>{
      console.log(`Name: ${name} rank: ${rank}`)
  }
  
  // handleSubmit = event => {
   
  //   event.preventDefault()
  //   this.props.getValue(this.state)
  // }

  checkForUnique = () => {
    // Show this error message: `Ranks must be unique` whenever the user has selected the
  //  same rank on multiple rows.
    this.setState({
      error : "Ranks must be unique"
    })  
  
  }

  isDisabled = () =>{
   // The submit button is disabled by default. Enable it when all rows have a
   // rank selected and all selected ranks are unique.
    return true
  }

  render() {

    const rows = this.state.animals.map((animal) => {
      return (
        <FormRow
          animalName={animal.name}
          key={animal.name}
          rank={animal.rank}
          handleChange={this.handleChange}
          getValue={this.getValue}
        />
      );
    });

    const headers = _.range(1, 6).map((i) => <th key={`header-${i}`}>{i}</th>);

    return (
      <div>
        {/* <form onSubmit={this.onSubmit}> */}
        <table>
          <thead>
            <tr>
              <th></th>
              {headers}
            </tr>
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>
        <div>{this.state.error}</div>
        <input type="submit" value="Submit" disabled={this.isDisabled()} />        {/* <button type="submit">Submit</button> */}
        {/* </form> */}
      </div>
    );
  }
}

export default MainPage;

在这里输入图像描述

我试图添加handleChange和handleAnimalSelect方法，但是我得到了一个错误。新的名称和级别没有添加到数组中。

MainPage.jsx

import React from 'react';
import _ from 'lodash';
import FormRow from './FormRow.jsx';
import Animal from './Animal.js';

class MainPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animals: ['panda','cat','capybara','iguana','muskrat'].map((name) => {
        return new Animal(name);
      }),
      error: ''
    };
  }


  isDisabled = () =>{
   // The submit button is disabled by default. Enable it when all rows have a
   // rank selected and all selected ranks are unique.
    return true
  }

  render() {

    const rows = this.state.animals.map((animal) => {
      return (
        <FormRow
          animalName={animal.name}
          key={animal.name}
          rank={animal.rank}
         
          getValue={this.getValue}
          handleAnimalSelect={this.handleAnimalSelect}
        />
      );
    });

    const headers = _.range(1, 6).map((i) => <th key={`header-${i}`}>{i}</th>);

    return (
      <div>
        {/* <form onSubmit={this.onSubmit}> */}
        <table>
          <thead>
            <tr>
              <th></th>
              {headers}
            </tr>
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>
        <div>{this.state.error}</div>
        <input type="submit" value="Submit" disabled={this.isDisabled()} />        
        {/* <button type="submit">Submit</button> */}
        {/* </form> */}
      </div>
    );
  }
}

export default MainPage;

FormRow.jsx

import React from 'react';
import _ from 'lodash';
import FormRow from './FormRow.jsx';
import Animal from './Animal.js';

class MainPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      animals: ['panda','cat','capybara','iguana','muskrat'].map((name) => {
        return new Animal(name);
      }),
      error: ''
    };
  }


  isDisabled = () =>{
   // The submit button is disabled by default. Enable it when all rows have a
   // rank selected and all selected ranks are unique.
    return true
  }

  render() {

    const rows = this.state.animals.map((animal) => {
      return (
        <FormRow
          animalName={animal.name}
          key={animal.name}
          rank={animal.rank}
         
          getValue={this.getValue}
          handleAnimalSelect={this.handleAnimalSelect}
        />
      );
    });

    const headers = _.range(1, 6).map((i) => <th key={`header-${i}`}>{i}</th>);

    return (
      <div>
        {/* <form onSubmit={this.onSubmit}> */}
        <table>
          <thead>
            <tr>
              <th></th>
              {headers}
            </tr>
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>
        <div>{this.state.error}</div>
        <input type="submit" value="Submit" disabled={this.isDisabled()} />        
        {/* <button type="submit">Submit</button> */}
        {/* </form> */}
      </div>
    );
  }
}

export default MainPage;

jsx

javascript

reactjs

回答 2

Stack Overflow用户

发布于 2020-10-23 23:20:59

你几乎是在用几行选择题来做一个表格。

简化一切的一种方法是将所有的逻辑都放在最上面的组件中，在您的例子中，我认为MainPage应该在它所在的位置。将一个函数传递给所有的后代，使他们能够向上游更新表单数据。

票数 1

Stack Overflow用户

发布于 2020-10-23 23:59:57

在Q2中，如何检查每一行的状态？也许您可以使用数组或对象来跟踪每个问题的状态。数组/对象存储在状态中，您只需检查它们是否处于状态。

实际上，我不清楚你的应用程序是什么样子--一排是什么样子的？(你可能想贴个截图)，我看不出有什么方法可以选择军衔--我甚至不知道这些职级是用来做什么的，也不知道它们是如何在表格中使用的。因此，您的表单设计可能需要调整。在开始表单设计时，你应该在脑海中清楚地看到这个应用程序的工作原理。也许从在纸上画屏幕开始，然后画一些小盒子来表示对象/数组变量，并通过用户使用你的应用程序的过程。当它们单击单选按钮时，不同的框会发生什么情况？如果同一级别被选中两次，您如何知道--所选级别存储在哪里？哪些动物被点击/选择？这些藏在哪里？先在纸上画出来。

数组或对象:如果希望保持简单，可以使用数组完成整个项目。你可以有一个数组来存储所有的动物。您可以有一个不同的数组来存储现在选择的动物(使用.includes()来测试动物是否在该数组中)。您可以使用另一个数组来存储已选定秩的行。当该行中的元素数===为行数时(这与动物的数量相同吗？)如果是，那么您可以使用动物数组的长度进行该测试)

您如何知道所选的行是否是唯一的？一种方法是不允许被选中的等级已经被选中。同样，使用.includes() (例如，arrSelectedRanks.includes(num))检查是否已经选择了级别。

这些支票是什么样子的？

const handleAnimalSelect = (animal) => {
   const err = this.state.selectedAnimals.includes(animal);
   if (err === true){
       this.setState(error: animal);
   }
}

return (
  <input
     type="radio"
     name={this.props.animalName}
     value={i}
     onClick={this.handleAnimalSelect}
  />

  { error !== undefined && (
    <div class={style.errorMessage}>{`Animal ${} was chosen twice`}</div>
  )}

);


};

记住:状态是用来记住给定组件中变量的值的。每个组件都有自己的状态。但是道具是传递给组件的数据/函数/元素。您不会更新组件中道具的值(道具值存储在另一个组件中。如果需要更新它们，则使用函数将数据传递回该变量处于状态的父组件，并更新其中的值)。

下面是一个使用.includes()检查某物是否存在的示例：

https://stackoverflow.com/a/64486351/1447509

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64508038

复制

相似问题

问单选按钮反应矩阵
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单选按钮反应矩阵EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单选按钮反应矩阵
EN