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

您有2个解决方案。

您可以使ColorBox成为有状态的组件，该组件将自行管理其颜色。

或将每行的每种颜色存储为不同的状态值。我在下面的代码中实现了第二个解决方案。

ColorBox现在是一个无状态组件，它将获得其当前颜色以及其props中的handler函数。处理程序函数将以必须在您的状态下设置正确值的索引来修饰。

使用计算属性，您现在可以在状态中动态设置正确的值：

    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以避免呈现问题

Answer 2

您对每个子组件使用相同的状态。在Applet组件之外的组件中创建ColorBox。

为行返回不同的值

2 个答案: