Возврат различных значений для строк

Question

Я работаю над проблемой возврата домой и не могу понять, как вернуть разные значения для разных строк.Я довольно новичок в реакции.Я хочу, чтобы этот переключатель возвращал указанное значение цвета, но я хочу, чтобы каждая строка могла возвращать разные значения.Вот код:

import React from 'react';
import ReactDOM from 'react-dom';



class Applet extends React.Component {
  constructor(props) {
    super(props);

    this.state = {color: undefined};
  }
  handleChange(event) {
    this.setState({
      color: event.target.value
    });
  }

  render() {
    const ColorBox = () => {

  return (
    <div className="row">
      <div className="col-sm">
        <label>
          <input type="radio" name="color_r" value="red" checked={this.state.color === 'red'} onChange={this.handleChange.bind(this)} /> R
            </label>
        <label>
          <input type="radio" name="color_g" value="green" checked={this.state.color === 'green'} onChange={this.handleChange.bind(this)} /> G
            </label>
        <label>
          <input type="radio" name="color_b" value="blue" checked={this.state.color === 'blue'} onChange={this.handleChange.bind(this)} /> B
            </label>
      </div>
      <div className="col-sm" >
        I am {this.state.color}
      </div>
    </div>
  );
};
let rows = [];

for (let i = 0; i < 10; i++) {
  rows.push(<ColorBox />);
}

return (
  <div className="whatthe">
    {rows}
  </div>
    );
  }
}

ReactDOM.render(
  <Applet />,
  document.getElementById('root')
);

Когда я нажал одну радиокнопку, она изменила целевое значение для всех из них.Я думаю, что понимаю почему, но я не знаю, как это изменить.

Answer 1

Вы используете одно и то же состояние для каждого подкомпонента.Сделайте ColorBox в компоненте вне вашего компонента Applet.

Answer 2

У вас есть 2 решения.

Вы можете либо сделать ColorBox компонентом Statefull, который будет сам управлять цветом, который он имеет.

Или сохранить каждый цвет для каждой строки в отдельномгосударственное значение.Я реализовал второе решение в приведенном ниже коде.

ColorBox теперь является компонентом без состояния, который получит свой текущий цвет и функцию обработчика в своих подпорках.Функция обработчика будет украшена индексом, которым она должна установить правильное значение в вашем состоянии.

Используя вычисленные свойства, вы теперь можете динамически устанавливать правильное значение в вашем состоянии:

    handleChange = index => event => {
        this.setState({
            [index]: event.target.value
        });
    }

Полностью рабочий пример:

class Applet extends React.Component {
    constructor(props) {
        super(props);

        this.state = {  };
    }

    handleChange = index => event => {
        this.setState({
            [index]: event.target.value
        });
    }

    render() {
        

        let rows = [];

        for (let i = 0; i < 10; i++) {
            rows.push(<ColorBox colorSelected={this.handleChange(i)} color={this.state[i]}/>);
        }

        return (
            <div className="whatthe">
                {rows}
            </div>
        );
    }
}

const ColorBox = ({ colorSelected, color }) => {
    return (
        <div className="row">
            <div className="col-sm" style={{ 'background-color': color }}>
                <label>
                    <input type="radio" name="color_r" value="red" checked={color === 'red'} onChange={colorSelected} /> R
                        </label>
                <label>
                    <input type="radio" name="color_g" value="green" checked={color === 'green'} onChange={colorSelected} /> G
                        </label>
                <label>
                    <input type="radio" name="color_b" value="blue" checked={color === 'blue'} onChange={colorSelected} /> B
                        </label>
            </div>
            <div className="col-sm" >
                I am {color}
            </div>
        </div>
    );
};

ReactDOM.render(
    <Applet />,
    document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<div id='root'>

Вам также нужно назначить переключателям различные id с в зависимости от их группы, чтобы избежать проблем с рендерингом