如何將道具從自動更正傳遞給父母 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")}
    />