试图在另一个类的列表项中显示反应选择的数组元素答案

【问题标题】：Attempting to show array element of react select in list item of another class试图在另一个类的列表项中显示反应选择的数组元素
【发布时间】：2020-06-19 02:30:11
【问题描述】：

我是新手，所以我可能会遗漏一些东西

我正在使用 react-select 来存储多个元素，并正在使用 map 函数来显示运行良好的元素。但是当我在另一个类中使用相同的元素在列表元素中显示时，它显示为空白。

这是我显示多个选项的代码。

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
              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 class Confirm extends Component {
  state = {
    selectedOptions: [],
  };

  render() {
    const {
      values: { selectedOptions },
    } = this.props;
    return (
      <List>
        <ListItemText primary="Departments" secondary={selectedOptions} />
      </List>
    );
  }
}

我知道我可能遗漏了一些非常基本的东西，但请帮忙

【问题讨论】：

不清楚您要做什么，但为了在另一个组件中使用一个组件，您需要导入它并渲染它以使其显示。
你能帮我举个例子吗？
我正在尝试向我的数组 selectedOptions 显示用户在屏幕上选择的值
您需要通过props 共享它，只要您有<MultiSelect2 /> 添加像<MultiSelect2 onSelect={this.onSelectCallback} /> 这样的道具，并在handleChangeField 中调用该道具并将所有选定的元素传递给它。我不知道您真正需要什么，因为所有相关代码都不存在。

标签： javascript reactjs react-redux material-ui react-select

【解决方案1】：

@Kubwimana 阿德里安

下面是剩下的代码：

export class Confirm extends Component {
  state = {
    rows: [],
    idx: [],
    selectedOptions: []
  };

  continue = e => {
    e.preventDefault();
    //Process Form//
    this.props.nextStep();
  };

  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };

  render() {
    const {
      values: {
        Title,
        Details,
        What,
        Why,
        How,
        Status,
        Cost,
        Benefits,
        Kpi_Before,
        Kpi_After,
        Time,
        dateTime,
        Base_Before,
        Target_Before,
        UOM_Before,
        idx,
        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" }}
                >
                  Confirm Information
                </Typography>
              </Toolbar>
            </AppBar>
          </div>

          <br />
          <h3>Are you sure to continue and confirm your information?</h3>
          <List>
            <ListItemText primary="Departments" secondary={selectedOptions} />
            <ListItemText primary="Title" secondary={Title} />
            <ListItemText primary="Kpi_Before" secondary={Kpi_Before} />
          </List>
         <p> {this.state.selectedOptions.map(o => (
            <p>{o.value}</p>
          ))}</p>
          <br />
          <Button
            variant="contained"
            color="primary"
            style={styles.button}
            onClick={this.continue}
          >
            Confirm & Continue
          </Button>
          <Button
            variant="contained"
            color="default"
            style={styles.button}
            onClick={this.back}
          >
            Back
          </Button>
        </React.Fragment>
      </MuiThemeProvider>
    );
  }
}

const theme = createMuiTheme({
  palette: {
    primary: blue,
    secondary: purple
  },
  status: {
    danger: "orange"
  }
});
const styles = {
  button: {
    margin: 15
  }
};

export default Confirm;

【讨论】：