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

Question

I've previously asked a question regarding the passing of state for react through props here: Laggy TextField Updates in React .

I've decided to refactor my code using ChrisG's method, where I store states in the parent FormSection, and pass props into the child CompanyField.

Parent:

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 is just MUI's textfield that was styled using styled components.

Child:

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

This managed to successfully update the parent components state. However, when doing the same thing to MUI's autocomplete:

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' },
];

This error occurs: The value provided to Autocomplete is invalid. None of the options match with 0 . You can use the isOptionEqualToValue prop to customize the equality test.

After clicking an option, it defaults to 0.

Additionally, the state is not updated.

Thanks!

Resolved: I've realised that unlike the textfield that returns one event prop whereby I have to do e.target.value, the MUI textfield returns two props namely event. As such, I have to create a second change handler that accepts 2 props event and value, but only using the value prop instead.

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

Does anyone know of a way to combine common handling events whereby they have different input (namely text field that has 1, vs autocorrect that has 2)? Or do I have to do some kind of overloading method?

Answer 1

"e" is undefined in your createHandleChange method. Try to get a reference to it by updating your code as below.

    ...
    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")}
    />