Question

我在使用材质选择时遇到问题。我想在onChange（）函数中捕获整个对象。当前事件仅捕获所选值。例如：如果我选择状态“进行中”，我想捕获该对象的STATUS_CODE。

class ExmComp extends Component {
  constructor(props) {
      super(props);
      this.state = {
          status:'Open' ,
      };
    const statusList = [
{
  "STATUS_ID": 10,
  "STATUS": "Open",
  "STATUS_CODE": "OSNO",
  "LINK": "open",
  "ICON": "done_outline"

},
{
  "STATUS_ID": 20,
  "STATUS": "In Progress",
  "STATUS_CODE": "NOPR",
  "LINK": "inProgress",
  "ICON": "play_arrow"
},
{
  "STATUS_ID": 40,
  "STATUS": "Cancelled",
  "STATUS_CODE": null,
  "LINK": "cancelled",
  "ICON": "cancel_presentation"
},
{
  "STATUS_ID": 30,
  "STATUS": "Closed",
  "STATUS_CODE": "NOCO",
  "LINK": "closed",
  "ICON": "close"
}
];

event.target.value仅返回该值。在这里我要捕获整个对象示例如果选择了close，我想捕获整个关闭的对象

  /* {
          "STATUS_ID": 30,
          "STATUS": "Closed",
          "STATUS_CODE": "NOCO",
          "LINK": "closed",
          "ICON": "close"
      }*/
    handleChange = event => {
          this.setState({status: event.target.value});

      };

      render(){
          return(
          <Select
              select
              label="Status"
              value={status}
              onChange={this.handleChange}
          >
              {statusList.map(option => (
                  <MenuItem key={option.STATUS_ID} value={option.STATUS}>
                      {option.STATUS}
                  </MenuItem>
              ))}
          </Select>
          )
      }
    }

Answer 1

不能在handleChange函数中从“ statusList”数组中过滤掉整个对象吗？像这样：

  handleChange = event => {
    const fullObject = statusList.filter(val => event.target.value === val.STATUS)[0];
    console.log(fullObject);
    this.setState({ [event.target.name]: event.target.value });
  };

代码-https://codesandbox.io/s/2zy7m2701r

React Material UI选择事件的捕获参考界面

1 个答案: