0

我有一个名为的自定义构建组件Autocomplete，它本质上是一个文本输入框，除其他外，它在输入时获取用户输入。它有一个onChange像这样的处理程序：

class Autocomplete extends Component {
    constructor(props) {
        super(props);
        this.state = {
            activeSuggestion: 0,
            filteredSuggestions: [],
            showSuggestions: false,
            userInput: ""
        };
    }

    //Lifted function to reset autocomplete for Reset button
    handleReset = () => {
        this.setState({
            userInput: ""
        });
    };

    //Begin Autocomplete functionality
    onChange = e => {
        const { suggestions } = this.props;
        const userInput = e.currentTarget.value;
        const filteredSuggestions = suggestions.filter(
            suggestion =>
                suggestion.toLowerCase().indexOf(userInput.toLowerCase()) > -1
        );
        this.setState({
            activeSuggestion: 0,
            filteredSuggestions,
            showSuggestions: true,
            userInput: e.currentTarget.value
        });
    };
     ....

我在这样的父表单组件中使用此组件：

<Autocomplete ref={autoCompleteRef} suggestions={affiliationData}
    onChange={myChangeHandler}/>

我正在尝试将 userInput 的值提升到我的钩子上。我最初尝试useRef在 myChangeHandler 中使用，但我无法让它在父组件中触发：

function AddContactForm() {
  const [name, setName] = useState();
  const [title, setTitle] = useState();
  const [current, setCurrent] = useState();
  const [email, setEmail] = useState();
  const [phone, setPhone] = useState();
  const [county, setCounty] = useState();
  const [affiliation, setAffiliation] = useState();
  const [centralRegionLead, setCentralRegionLead] = useState("True");

  const myChangeHandler = (event) => {
    let nam = event.target.name;
    let val = event.target.value;
    if (nam === 'name') {
      setName(val);
    } else if (nam === 'title') {
      setTitle(val);
    } else if (nam === 'current') {
      setCurrent(val);
    } else if (nam === 'email') {
      setEmail(val);
    } else if (nam === 'phone') {
      setPhone(val);
    } else if (nam === 'county') {
      setCounty(val);
    } else if (nam === 'autocomplete') {
      const { state } = autoCompleteRef.current;
      setAffiliation(state.userInput);
    } else if (nam === 'centralRegionLead') {
      setCentralRegionLead(val);
    }
  }

我在这里做错了什么？

4

1 回答 1

1

因此，如果我理解正确 - 看起来您正在管理子 Autocomplete 组件中 userInput 的状态，并且要访问父组件中的 userInput ，您必须在父组件中声明和管理 userInput 状态和将其作为道具传递给 Autocomplete。

如果我误解了，请见谅...

于 2021-08-13T18:38:23.347 回答