如何将道具从自动更正传递给父母 class

Question

我之前已经问过一个关于传递 state 以通过道具做出反应的问题： Laggy TextField Updates in React 。

我决定使用 ChrisG 的方法重构我的代码，我将状态存储在父 FormSection 中，并将道具传递给子 CompanyField。

家长：

class FormSection extends React.Component {

  state = { 
    company: '', 
    jobType: ''
  };

  createHandleChange(name) {
    return (e) => {
      try {
      this.setState({ [name]: e.target.value.toLowerCase() }); //convert to lowercase if text data
      } catch {
        this.setState({ [name]: e.target.value }); 
      }
      console.log(name,  e.target.value);
    };
  }

  render() {
    return (
        <FormContainer>
            <CompanyField  # Working Correctly
                value={this.state.company}
                handleChange={this.createHandleChange("company")}
            />

            <JobTypeField  # Does not work
                value={this.state.jobType}
                handleChange={this.createHandleChange("jobType")}
            />
        </FormContainer>
   )
}

TextFieldStyled 只是 MUI 的文本字段，它使用样式化组件进行了样式化。

孩子：

    class CompanyField extends React.Component {
    
      render() {
        return (
          <TextFieldStyled
            id = "outlined-basic" 
            label = "Company" 
            variant = "outlined"
            fullWidth
    
            value={this.props.value}
            onChange={this.props.handleChange}
          />
        );
      }
    }

这成功地更新了父组件 state。但是，当对 MUI 的自动完成执行相同的操作时：

class  JobTypeField extends React.Component {
    
    render() {
        return (
            <DropDownStyled>
                <Autocomplete
                    disablePortal
                    id="combo-box-demo"
                    options={jobType}

                    value={this.props.value}
                    onChange={this.props.handleChange}
                    renderInput={(params) => <TextField {...params} label="Job Type" />}
                />
            </DropDownStyled>
        );
    }
}

const jobType = [
  { label: 'Full-Time' },
  { label: 'Part-Time' },
  { label: 'Internship' },
  { label: 'Contract' },
  { label: 'Freelance' },
];

发生此错误：提供给自动完成的值无效。 没有一个选项与0匹配。 您可以使用isOptionEqualToValue来自定义相等性测试。

单击一个选项后，它默认为 0。

此外，state 未更新。

谢谢！

已解决：我已经意识到，与返回一个事件道具的文本字段不同，我必须执行 e.target.value，MUI 文本字段返回两个道具，即事件。 因此，我必须创建第二个更改处理程序，它接受 2 个 props 事件和值，但只使用 value prop。

  createHandleChange2(name) {
    return (event, value) => {
      try {
        this.setState({ [name]: value.label.toLowerCase() }); 
        console.log(name,  value.label);  
      } catch {
        this.setState({ [name]: '' }); 
        console.log(name,  '');
      }
    };

有谁知道一种方法来组合常见的处理事件，从而使它们具有不同的输入（即具有 1 的文本字段与具有 2 的自动更正）？ 或者我必须做某种重载方法吗？

Answer 1

“e”在您的createHandleChange方法中未定义。 尝试通过如下更新代码来获取对它的引用。

    ...
    createHandleChange(e, name) {
      return (e) => {
        try {
          this.setState({ [name]: e.target.value.toLowerCase() }); //convert to lowercase if text data
        } catch {
          this.setState({ [name]: e.target.value }); 
        }
        console.log(name,  e.target.value);
      };
    }
    ...

    <CompanyField  // Working Correctly
        value={this.state.company}
        handleChange={(e) => this.createHandleChange(e, "company")}
    />