單選按鈕的反應矩陣
[英]React Matrix of Radio buttons
問題描述
我試圖解決這個 js react 問題並被困在問題 2-4 上。 問題 2：我不知道如何檢查每一行的本地狀態以檢查重復的等級選擇問題 3：我是否需要將道具傳遞給組件來檢查唯一性？ 問題 4：如何檢查所有行都具有選擇排名和唯一性？
以下是問題：
將“完成”類添加到行中會將其突出顯示為綠色。 對具有選定等級的行提供此視覺反饋。
將“錯誤”類添加到行中會將其突出顯示為紅色。 在選擇了重復排名的行上提供此視覺反饋。
在提交按鈕附近有一個顯示錯誤消息的地方。 顯示此錯誤消息：當用戶在多行上選擇相同的排名時，
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;
主頁.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;
表格行.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;
動物.js
class Animal {
constructor(name, rank) {
this.name = name;
this.rank = rank;
}
}
export default Animal;
我的代碼在 GitHub (git@github.com:HuydDo/js_react_problem-.git)。 謝謝你的建議！
表格行.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;
主頁.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 方法，但出現錯誤。 新名稱和等級不會添加到數組中。
主頁.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
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;
2 個解決方案
解決方案1
1 2020-10-23 23:20:59
您幾乎正在制作一個包含幾行多項選擇答案的表格。
簡化所有內容的一種方法是將所有邏輯放在頂部組件中，在您的情況下，我認為MainPage將是它所在的位置。 將函數作為道具傳遞給所有后代，允許他們更新上游表單數據。
解決方案2
1 2020-10-23 23:59:57
在 Q2 中，打算如何檢查每一行的狀態？ 也許您可以使用數組或對象來跟蹤每個問題的狀態。 數組/對象存儲在狀態中，您只需檢查它們以查看狀態。
我實際上不清楚您的應用程序是什么樣的 - 一行是什么樣的？ （您可能想要張貼屏幕截圖）而且我沒有看到任何選擇排名的方法 - 我什至不知道排名的用途，或者它們在表格中的使用方式。 所以也許你的表單設計需要調整。 您應該從腦海中清楚地了解應用程序的工作原理來開始表單設計。 也許首先在紙上繪制屏幕並繪制代表對象/數組變量的小框，然后完成用戶使用您的應用程序的過程。 單擊單選按鈕等時，各種框會發生什么。 您如何知道是否選擇了兩次相同的排名 - 所選排名存儲在哪里？ 點擊/選擇了哪些動物？ 那些存儲在哪里？ 先全部畫在紙上。
數組或對象：如果你想保持簡單，你可以只使用數組來完成整個項目。 您可以擁有一個存儲所有動物的數組。 您可以有一個不同的數組來存儲現在選擇的動物（使用 .includes() 測試動物是否在該數組中）。 您可以使用另一個數組來存儲已選擇排名的行。 當該行中的元素數 === 行數時（是否與動物數相同？如果是，那么您可以使用動物數組的長度進行該測試）
您如何知道所選排名的行是否唯一？ 一種方法是 DISALLOW 選擇一個已經被選擇的等級。 同樣，使用 .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>
)}
);
};
記住：狀態是你用來記住給定組件中變量值的東西。 每個組件都有自己的狀態。 但是 Props 用於傳遞到組件中的數據/函數/元素。 您不會更新組件中 props 的值（prop 值存儲在另一個組件中。如果您需要更新它們，您可以使用函數將數據傳回該變量處於狀態的父組件，並更新該值那里）。
這是一個使用.includes()檢查某物的存在/不存在的示例：
使用引導程序和單選按鈕做出反應
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.