获取导出组件的当前状态值

Posted 2023-02-22

【中文标题】获取导出组件的当前状态值

【英文标题】：Getting the current state value of an exported component

【发布时间】：2021-09-01 15:21:56

【问题描述】：

我为我的 React 应用程序构建了一个自动完成组件，并使用此 tutorial 将其导出到另一个组件中。一切都适用于自动更正，但我有一个单独的按钮，需要获取自动完成用户输入的状态值，并将其作为参数插入到表单 onSubmit 事件期间的 API 调用中。

<div className="sidebar" style=
            borderLeft: "1px solid gray"
        >
            <h2 style= textAlign: "center" > Filter</h2>
            <form onSubmit=(e) =>  e.preventDefault(); callSearchAPI(//Autocomplete value); >
                <label style=>Name</label> <br />
                <input
                    placeholder="Type name"
                    style= textAlign: "center", marginRight: "10px", height: "25px" 
                    value=interest
                    onChange=HandleChange></input>
                <Autocomplete suggestions=namesData />
                <button className="btn btn-primary" > Search</button>
                <br />
                <div>namesData</div>
            </form>
            <p>namesData</p>
        </div>

自动完成组件有一个onChange 和onClick 事件处理程序/侦听器，只要在文本框中输入新值或从自动完成下拉菜单中选择新值，就会更新组件状态。我需要做的就是在另一个组件中获取当前值并将其插入<form onSubmit=(e) => e.preventDefault(); callSearchAPI(//Autocomplete value); >（如果这是香草javascript，我可以简单地添加一个id并使用=>document.getElementById("Autocomplete").value）。我如何在 React 中做到这一点？我可以在第二个组件中创建另一个 onChange 处理程序还是有更简单的解决方案？

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

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

【参考方案1】：

在父组件中，您可以使用 React ref 来访问子类组件的状态。

const autoCompleteRef = useRef(); // <-- (1) create a ref

...

<form
  onSubmit=(e) => 
    e.preventDefault();

    // access the state
    const  state  = autoCompleteRef.current; // <-- (3) access ref current value
    console.log(state.userInput);

    callSearchAPI(//Autocomplete value);
  
>
  <label>Name</label>
  <br />
  <input
    placeholder="Type name"
    style= textAlign: "center", marginRight: "10px", height: "25px" 
    value=interest
    onChange=HandleChange
  />
  <Autocomplete
    ref=autoCompleteRef // <-- (2) attach the ref
    suggestions=namesData
  />
  <button className="btn btn-primary">Search</button>
  <br />
  <div>namesData</div>
</form>

【讨论】：

这就是我所需要的； useRef()！感谢您在 cmets 中放置的详细步骤。很有帮助。