我的 REACT 组件中的状态没有更新 class

Question

所以我有一系列组件，一个滑块，3 个长、中、短按钮和一个 Go！按钮。这是一个屏幕截图，您可以看到 UI

我有一个组件 class 用于滑块和 3 个长短按钮和中按钮。所有这些都共享状态值。状态值是滑块上的当前数字..，以及一组 true/false 值，基于是否选择了 long/short/medium 按钮。

因此，例如在屏幕截图中我们可以看到选择了长，而没有选择中短... 所以在这个州这看起来像

Long = true
Medium = false
short = false

因此限制滑块和 3 个按钮的状态值被传递给 Go！按钮作为道具

我希望对“开始”按钮执行的操作是在每次单击它时打印出状态。

但问题是当我更改滑块或单击其他按钮时状态根本不更新，我无法弄清楚为什么...

这是第一个 class（滑块和 3 个按钮）注释的源代码

class User_Preference_Params extends Component {
  // contructor containing the current val of slider and the button stats (which are true false values)
  constructor() {
    super();
    this.state = {
      currentValue: 30,
      button_State: { long: false, medium: true, short: false }
    };
  }
  // these are onclick functions that reset the state any time the long medium short buttons are clicked
  longClicked() {
    this.setState({
      button_State: {
        long: true,
        medium: false,
        short: false
      }
    });
  }

  mediumClicked() {
    this.setState({
      button_State: {
        long: false,
        medium: true,
        short: false
      }
    });
  }

  shortClicked() {
    this.setState({
      button_State: {
        long: false,
        medium: false,
        short: true
      }
    });
  }

  // this func gets the current value of the slider on change
  setCurrentValue(new_Value) {
    this.setState({
      currentValue: new_Value
    });
  }

  render() {
    function valuetext(value) {
      // getValue(value);
      return `${value}objects`;
    }

    function getValue(value) {
      return value;
    }

    return (
      // returning my slider and buttons
      <div className="main">
        <div className="slider">
          <Typography id="discrete-slider" gutterBottom>
            Limit
          </Typography>
          <Slider
            defaultValue={30}
            getAriaValueText={valuetext}
            aria-labelledby="discrete-slider"
            valueLabelDisplay="auto"
            step={1}
            marks
            min={1}
            max={50}
            onChange={() => this.getCurrentValue(getValue)}
          />
        </div>

        <div className="Pref_Timeform">
          <FormControl component="fieldset">
            <RadioGroup
              row
              aria-label="position"
              name="position"
              defaultValue="top"
            >
              <FormControlLabel
                value="top"
                control={<Radio color="primary" />}
                label="Long"
                labelPlacement="top"
                onClick={() => this.longClicked()}
              />
              <FormControlLabel
                value="start"
                control={<Radio color="primary" />}
                label="Medium"
                labelPlacement="top"
                onClick={() => this.mediumClicked()}
              />
              <FormControlLabel
                value="bottom"
                control={<Radio color="primary" />}
                label="Short"
                labelPlacement="top"
                onClick={() => this.shortClicked()}
              />
            </RadioGroup>
          </FormControl>
        </div>
        {/* // here i pass the states as props to the button */}
        <div className="Button">
          <User_Preference_Button
            currentValue={this.state.currentValue}
            button_State={this.state.button_State}
          />
        </div>
      </div>
    );
  }
}

这里是按钮的代码 class

class User_Preference_Button extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: this.props.currentValue,
      button_State: this.props.button_State
    };

  render() {
    return (
      <div className="send_Container">
        <Button
          className="go_Button"
          variant="outlined"
          // here is the onlcikc that is suppost to log the states whcn i click the  Go! button
          onClick={() => {
            console.log(this.state.value, this.state.button_State);
          }}
        >
          Go!
        </Button>
      </div>
    );
  }
}

我觉得这可能与我如何实例化更新状态的函数有关。但是我很卡，希望对新手有任何帮助！

Answer 1

当您设置滑块的新值时，您没有做任何事情来更新按钮的状态标志。虽然您可以修复设置新值的位置（在 getCurrentValue 中），但我根本不会将按钮状态作为它们自己的标志进行跟踪。相反，我会根据滑块的当前值推断状态，并在用户单击按钮时设置滑块值（以及按钮状态）。

这是一个简化的例子：

class Radio extends React.Component {
    render() {
        const { name, label, buttonValue, value, setValue } = this.props;
        return (
            <label>
                <input
                    type="radio"
                    name={name}
                    checked={buttonValue === value}
                    onClick={() => setValue(buttonValue)}
                />
                {label}
            </label>
        );
    }
}

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 60
        };
        this.setValue = this.setValue.bind(this);
    }

    setValue(value) {
        this.setState({value});
    }
    
    render() {
        const { value } = this.state;
        return (
            <div>
                <input
                    type="range"
                    min="30" 
                    max="90"
                    step="30"
                    value={value}
                    onChange={({target: {value}}) => this.setValue(+value)}
                />
                <Radio name="range" label="Short" buttonValue={30} value={value} setValue={this.setValue} />
                <Radio name="range" label="Medium" buttonValue={60} value={value} setValue={this.setValue} />
                <Radio name="range" label="Long" buttonValue={90} value={value} setValue={this.setValue} />
            </div>
        );
    }
}

ReactDOM.render(<Example/>, document.getElementById("root"));

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

我的 REACT 组件中的状态没有更新 class

State is not updating in my REACT component class

javascript

reactjs

react-native

react-state