如何在reactjs中使用material-ui以红色显示helperText

Question

我的目标是以红色显示 helperText，就像我们在错误时间中显示的那样。但我没能做到。无法弄清楚我哪里出了问题。

这是代码：

class Sample extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      channel: -1,
      sports: -1,
      movie: ""
    };
  }
  handleChange = (e: any) => {
    this.setState({ channel: e.target.value });
  };
  handleSports = (e: any) => {
    this.setState({ sports: e.target.value });
  };

  handleMovie = (e: any) => {
    this.setState({ movie: e.target.value });
  };

  Valid = () => {
    const errors = { channel: "", sports: "", movie: "" };
    if (!this.state.channel) {
      errors.channel = "Please select channel";
    }
    if (!this.state.sports) {
      errors.sports = "select Sports";
    }
    if (!this.state.movie) {
      errors.movie = "select movie";
    }
    return {
      errors,
      isSubmit: Object.keys(errors).length === 0
    };
  };

  handleSubmit = (e: any) => {
    e.preventDefault();
    const data = {
      channel: this.state.channel,
      sports: this.state.sports,
      movie: this.state.movie
    };
    console.log(data);
  };

  render() {
    const { errors, isSubmit } = this.Valid();
    return (
      <>
        <FormControl>
          <Select
            defaultValue={-1}
            onChange={this.handleChange}
            displayEmpty
            inputProps={{ "aria-label": "Without label" }}
          >
            <MenuItem value={-1}>Select Channel</MenuItem>
            <MenuItem value={10}>Sports</MenuItem>
            <MenuItem value={20}>Entertainment</MenuItem>
          </Select>
          {!this.state.channel ? (
            <FormHelperText>{errors.channel}</FormHelperText>
          ) : null}
        </FormControl>
        {this.state.channel === 10 ? (
          <div>
            <FormControl>
              <Select
                defaultValue={-1}
                onChange={this.handleSports}
                displayEmpty
                inputProps={{ "aria-label": "Without label" }}
              >
                <MenuItem value={-1}>Select </MenuItem>
                <MenuItem value={10}>Star sports 1</MenuItem>
                <MenuItem value={20}>Star sports 2</MenuItem>
              </Select>
              {!this.state.sports ? (
                <FormHelperText>{errors.sports}</FormHelperText>
              ) : null}
            </FormControl>
          </div>
        ) : this.state.channel === 20 ? (
          <div>
            <FormControl>
              <Select
                defaultValue={-1}
                onChange={this.handleMovie}
                displayEmpty
                inputProps={{ "aria-label": "Without label" }}
              >
                <MenuItem value={-1}>Select</MenuItem>
                <MenuItem value={10}>Star Movies</MenuItem>
                <MenuItem value={20}>ABC</MenuItem>
              </Select>
              {!this.state.movie ? (
                <FormHelperText>{errors.movie}</FormHelperText>
              ) : null}
            </FormControl>
          </div>
        ) : null}
        <div>
          <Button disabled={isSubmit} onClick={this.handleSubmit}>
            Submit
          </Button>
        </div>
      </>
    );
  }
}
export default Sample;

这是工作示例

我不知道为什么它不显示为红色。在这个问题上苦苦挣扎。有人可以帮我解决这个问题吗？

Answer 1

像这样传递错误属性：

    <FormControl error={!this.state.channel}>
      <Select
        defaultValue={-1}
        onChange={this.handleChange}
        displayEmpty
        inputProps={{ "aria-label": "Without label" }}
      >
        <MenuItem value={-1}>Select Channel</MenuItem>
        <MenuItem value={10}>Sports</MenuItem>
        <MenuItem value={20}>Entertainment</MenuItem>
      </Select>
      {!this.state.channel ? (
        <FormHelperText>{errors.channel}</FormHelperText>
      ) : null}
    </FormControl>

或者就像这样

    <FormHelperText error>{errors.channel}</FormHelperText>

这是文档： https: //material-ui.com/api/form-helper-text/