onChange 没有为自定义子组件触发

Question

我有一个名为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 的值提升到我的钩子上。我最初尝试在 myChangeHandler 中使用 useRef，但我无法让它在父组件中触发：

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);
    }
  }

我在这里做错了什么？

Answer 1

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

如果我误解了，请道歉......