时间戳

首页 > 解决方案 > 反应：尝试将状态传递给父级时，事件为空

javascript - 反应：尝试将状态传递给父级时，事件为空

问题描述

当使用 React 库时，该onChange方法可用于将状态传递给父组件，如下所示：

export class Parent extends React.Component<{}, { foo: string }> {
    render() {
        return (
            <Input
                value={this.state.foo}
                onChange={this.handleFooChange}
            />
        );
    }

    handleFooChange = (event: any) => {
        this.setState({
            foo: event.target.value
        });
    }
}

它按预期更改父级中的状态。我想将该onChange属性用于我自己的组件，该组件包装了另一个库组件，但似乎无法让它工作。我本质上只是想Dropdown通过Picker.

interface Props{
    onChange: any;
}

interface State{
    picked: string;
}

export class PickerComponent extends React.Component<Props, State> {

    constructor(props: any) {
        super(props);

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange = (event: any) => {
        this.setState({
            picked: event.target.value,    //is null
        });
    };

    render() {
        return (
            <Input
                value={this.state.picked}
                onChange={this.handleChange}
            />
        );
    }
}

在上面的简化实现中，我得到了一个TypeError: Cannot read property 'target' of null事件。handleChange

这是CodePen上类似的东西，但在这里甚至父级都包含一个bind()有点令人困惑的调用。欢迎任何帮助或替代解决方案。 Dropdown如果重要，Input则取自 Fluent UI。

编辑：错字

标签： javascriptreactjsonchange

解决方案

该错误实际上源于InputFluent UI 中包装组件的行为，该组件返回一个event和datathrough onChange。而不是期望event.target.value收到的值在于data.value. 如果子组件和父组件中需要状态，则在子组件中handleChange应如下所示。如果此处不需要状态，则可以完全省略它。

interface PickerProps {
      onChange: any;
  }
  
  interface PickerState {
      picked: string;
  }
  
  export class Picker extends React.Component<PickerProps, PickerState> {
  
      constructor(props: any) {...}

      handleChange = (e: any, data: any) => {
          this.setState({
              picked: data.value,
          });
          this.props.onChange(e, data);
      };
  
      render() {
          return (
              <Input
                  onChange={this.handleChange} //call this.props.onChange if state is only needed in parent
              />
          );
      }
  }

父母可以通过使用完全相同的handleChange方法来调用孩子并将其传递给孩子

<Picker
     onChange={this.handleChangeButInParent}
/>

也可能只是将 data.value 传递给父级。

推荐阅读