为行返回不同的值

Question

我正在解决一个带回家的问题，但我不知道如何return 为不同的行设置不同的值。我对反应还很陌生。我希望此单选按钮 return 规定的颜色值，但我希望每一行能够 return 不同的值。这是代码。

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 现在是一个无状态组件，它将在其属性中获取其当前颜色和处理函数。处理函数将用它必须在您的状态中设置正确值的索引进行修饰。

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

    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。

为行返回不同的值

Returning different values for rows

state

reactjs

react-props