Question

我有两个名为父和子的组件。

子组件包含复选框，它会将所选复选框的值发送到父组件

儿童

class Child extends Component{
  state = {
    options: [],
    selected_options: []
  }
  handleClose = (e) => {
    this.props.add(this.state.selected_options)
  }
  handleChange = (event) => {
    console.log(event.target.name);
    if(event.target.checked==true){
      event.target.checked=false
      this.state.selected_options.slice(this.state.options.indexOf(event.target.value),1)
    }
    else{
      event.target.checked = true
      this.state.selected_options.push(event.target.value)
    }
  }
  render() {
    return(
      <div>
        <Grid>
          {
            this.state.options.map(value => {
              return(
                    <Checkbox onChange={this.handleChange} label={value.name} value={value.name}   checked={false} />
              )
            })
          }
        <Button color='green' onClick={this.handleClose} inverted>
          <Icon name='checkmark' /> Apply
        </Button>
      </div>
    );
  }
}

和父组件

class Parent extends Component {
  constructor(props){
    super(props);
    this.state =  {
      selected_options:[],
    }
  }
  addOptions = (options) => {
    this.setState({
      selected_options: options
    })
  }
  render() {
    return(
      <div>
        <Child selected_options={this.state.selected_options} add={this.addOptions}  />
      </div>
    );
  }
}

选中复选框后，必须在控制台中输出相应的值。但它显示未定义

Answer 1

直接改变状态或事件值不是正确的想法

你应该这样做

class Child extends Component{
  state = {
    checkedState: []
    options: [],
    selected_options: []
  }
  handleClose = (e) => {
    this.props.add(this.state.selected_options)
  }
  handleChange = (index, value) => {
    var checkedState = [...this.state.checkedState];
    if(checkedState[index] === undefined) {
       checkedState.push(true)
    }
    else {
       if(checkedState[index] === true) {
             var selected_options=[...this.state.selected_options];
             var idx = selected_options.findIndex((obj) => obj.name == value)
             selected_options.splice(idx, 1);
             checkedState[index] = false
       } else {
          var selected_options=[...this.state.selected_options];
          selected_options.push(value);
       }
    }
    this.setState({checkedState, selected_options})
  }
  render() {
    return(
      <div>
        <Grid>
          {
            this.state.options.map((value, index) => {
              return(
                    <Checkbox onChange={() => this.handleChange(index, value.name)} label={value.name} value={value.name}   checked={this.state.checkedState[index] || false} />
              )
            })
          }
        <Button color='green' onClick={this.handleClose} inverted>
          <Icon name='checkmark' /> Apply
        </Button>
      </div>
    );
  }
}

并从父级渲染子级而不是父级

<强>父

render() {
    return(
      <div>
        <Child selected_options={this.state.selected_options} add={this.addOptions}  />
      </div>
    );
  }

为什么event.target.value未定义？

1 个答案: