如何根据单选按钮设置 React 初始状态？

Question

所以我有一个兄弟组件，其状态受单选按钮的影响

constructor (props){
    super(props);
    this.state = {
      selectedOption: "option1",
      bgColor: '',
    }
  }
  handleOptionChange = changeEvent => {
    this.setState({
      selectedOption: changeEvent.target.value,
      bgColor: changeEvent.target.name
    });
  };
  

  render() {
      return (
      <div>
      <CardBack fill={this.state.bgColor}/>
      <div>
        <label>
          <input
          type="radio"
          name="blue"
          value="option1"
          checked={this.state.selectedOption === "option1"}
          onChange={this.handleOptionChange}
          />
          Option 1
        </label>
        <label>
          <input
          type="radio"
          name="red"
          value="option2"
          checked={this.state.selectedOption === "option2"}
          onChange={this.handleOptionChange}
          />
          Option 2
        </label>
      </div>
      </div>
      )
    }
  }

我想使初始状态为通过选项 1 选择的任何颜色。在本例中为蓝色。我知道有办法做到这一点，但现在我没有得到它（我变黑了，这是 svg 填充的原始颜色）

Answer 1

我不确定我的问题是否正确，但您可以简单地将 bgColor 设置为 blue:

constructor (props){
    super(props);
    this.state = {
      selectedOption: "option1",
      bgColor: 'blue',
    } 
}

Answer 2

在实际渲染组件之前，您无法根据此组件中的输入名称设置组件的状态。继续的最佳选择是将初始状态设置为“蓝色”/“红色”，具体取决于您首先要选择的内容（在您的情况下为“蓝色”）


    import ReactDOM from 'react-dom';
    import React, { Component } from 'react';
    
    const componentValue = document.querySelector("input[name=blue]");
    console.log(componentValue) // will evaluate to null
    
    class ComponentName extends Component {
      constructor (props){
        super(props);
        this.state = {
          selectedOption: "option1",
          bgColor: document.querySelector("input[name=blue]"),
        }
        console.log(this.state.bgColor)// will evaluate to null
      }

      handleOptionChange = changeEvent => {
        const componentValue = document.querySelector("input[name=blue]").name;
        console.log(componentValue); // will evaluate to "blue"
        this.setState({
          selectedOption: changeEvent.target.value,
          bgColor: changeEvent.target.name
        });
      };

      render({
        ...
      )}
    }

如何根据单选按钮设置 React 初始状态？

How to set React initial state based on radio buttons?

javascript

components

reactjs