Question

我是新来的反应者，并且正在使用react-select来选择各个部门。我试图验证选择下拉列表，以便如果选择下拉列表为空，则会给出错误消息。我不确定该怎么做。它显示此错误：

Departments.continue

D:/react_bpms1/src/components/Departments.js:69
  66 |   this.setState({ selectedOptions });
  67 | };
  68 | continue = e => {
> 69 |   if (document.getElementById("Departments").value.length < 1) {
     | ^  70 |     document.getElementById("departments").style.visibility = "visible";
  71 |     document.getElementById("Departments").style.border = "1px solid red";
  72 |   } else {








But here is what I am doing:


const Departments = [
  { label: "OneIT", value: "OneIT" },
  { label: "HR", value: "HR" },
  { label: "Vigilance", value: "Vigilance" },
  { label: "Ethics", value: "Ethics" },
  { label: "Corporate Services", value: "Corporate Services" },
  { label: "Legal", value: "Legal" },
  { label: "Sports", value: "Sports" },
  { label: "TQM", value: "TQM" },
  { label: "Iron Making", value: "Iron Making" },
  { label: "TMH", value: "TMH" }
];

class MultiSelect2 extends Component {
  state = {
    selectedOptions: []
  };
  handleChangeField = selectedOptions => {
    this.setState({ selectedOptions });
  };
  render() {
    const { selectedOption } = this.state;
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-2"></div>
          <div className="col-md-8">
            <span>Select Department</span>
            <Select
              id="Departments"
              htmlFor="Departments"
              value={selectedOption}
              options={Departments}
              onChange={this.handleChangeField}
              isMulti
            />
            {this.state.selectedOptions.map(o => (
              <p>{o.value}</p>
            ))}
          </div>
          <div className="col-md-4"></div>
        </div>
      </div>
    );
  }
}

export default MultiSelect2;

在这里我要调用Multiselect选项：

export class Departments extends Component {
  state = {
    rows: [],
    idx: [],
    selectedOptions: []
  };
  handleChangeField = selectedOptions => {
    this.setState({ selectedOptions });
  };
  continue = e => {
    if (document.getElementById("Departments").value.length < 1) {
      document.getElementById("departments").style.visibility = "visible";
      document.getElementById("Departments").style.border = "1px solid red";
    } else {
      e.preventDefault();
      this.props.nextStep();
    }
  };
  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };

  render() {
    const { values, handleChange } = this.props;
    const { selectedOption } = this.state;

    const {
      values: {
        Title,
        Details,
        What,
        Why,
        How,
        Status,
        Cost,
        Benefits,
        Kpi_Before,
        Kpi_After,
        UOM_Before,
        UOM_After,
        Base_After,
        Target_After,
        dateTime_After,
        Base_Before,
        Target_Before,
        Time,
        dateTime,
        departments,
        Departments,
        selectedOptions
      }
    } = this.props;

    return (
      <MuiThemeProvider theme={theme}>
        <React.Fragment>
          <div className={useStyles.root}>
            <AppBar position="static">
              <Toolbar>
                <Typography
                  gutterBottom
                  align="center"
                  style={{ width: "100%", alignItems: "center" }}
                >
                  Select Departments
                </Typography>
              </Toolbar>
            </AppBar>
          </div>
          <br />
          <br />
          <Grid container>
            <Grid item xs={6}>
              <MultiSelect2
                style={{ width: "80%" }}
                id="Departments"
                onChange={this.handleChangeField}
                value={selectedOption}
              />
              <label
                id="departments"
                style={{ visibility: "hidden", color: "red" }}
              >
                Select Applicable departments
              </label>
            </Grid>

Answer 1

作为@sandeeppradhan，您必须停止使用这些访问器，并认为数据驱动，即更改状态/道具并通过界面显示它们，不要像现在那样更改样式，因为dom可能随时更改。这是错误的来源，因为该组件可能未连接到dom或子组件可能尚未就绪。 TBH，您错了太多了，无法对代码进行较小的更新以解决问题

更具体地回答您的问题：事件发生时可能未呈现MultiSelect2。解决方案不好，但您可能会感兴趣：将MultiSelect2合并到Departments中并使用ref + state

例如：

export class Departments extends Component {
 constructor(props) {
    super(props);
    this.state={
      departmentsStyle:{}
    };
    this.departmentsRef = React.createRef();
  }
  //...
  continue = e => {
    if (this.departmentsRef.current && this.departmentsRef.current.value.length < 1) {
       this.setState({
        departmentsStyle:{
          border:"1px solid red",
          visibility : "visible"
        }
       });
    } else {
      this.setState({
        departmentsStyle:{}
       });
      e.preventDefault();
      this.props.nextStep();
    }
  };
  //.... ETC ETC
  render() {
    //...
    return (
      ///...
      //The ref is forwarded to the root element 
      //(if it does not work use inputRef={departmentsRef})
      <Select ref={departmentsRef} style={this.state.departmentsStyle}
      //...
     )
}

我认为最好的解决方案：此时，我唯一建议的建议是看一下Formik并将FormikBag转移到MultiSelect2。然后，您可以利用表单状态更好地管理组件。

https://jaredpalmer.com/formik/docs/overview

祝你好运，

验证反应选择，无法读取未定义的属性“长度”

1 个答案: