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

Posted 2023-02-23

【中文标题】onChange 没有为自定义子组件触发

【英文标题】：onChange not firing for custom Child component

【发布时间】：2021-10-16 23:24:09

【问题描述】：

我有一个名为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);
    
  

我在这里做错了什么？

【参考方案1】：

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

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

【讨论】：

我不确定我是否跟随。我在父组件中有一个名为Affiliation 的钩子。自动完成用于Affiliation' userInput that comes from the child component, Autocomplete. I can access the value in the parent component with useRef`，但我不知道如何在userInput 值发生变化时将其传递给Affiliations 挂钩。你能举一些例子说明我将如何做你建议的事情吗？

对不起，由于声誉问题无法发表评论，所以不得不回答——我对结构感到困惑。哪个组件是父组件，哪些是子组件？另外，您似乎将 myChangeHandler 作为道具传递给 Autocomplete：<Autocomplete onChange=myChangeHandler ... /> 但您还在 autocomplete 类中声明了一个新的 onChange 函数。当发生变化时，您希望这两个函数都运行吗？如果是这样，似乎没有在自动完成组件中调用 prop.onChange