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

Question

我为我的 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
        });
    };

Answer 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>