主页 / 问题 / 579389
Accepted
Monarch
Asked:2020-10-18 03:42:56 +0000 UTC2020-10-18 03:42:56 +0000 UTC

如何访问特定事件的子元素？

  • 772

鉴于组件的结构：

-组件 1
  -组件 1.1

在reactjs中，如何在父组件中的事件上调用其子组件并将其输入字段设为空

class Search extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this); 
        this.state = {text: ''};
    }

    handleChange(event) {
        let text = event.target.value;

        this.setState({ text });
    }

    render() {
        return <input type="text" onChange={this.handleChange} />; // (1)
    }
} 

class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit() {
        // При отправке нужно изменить содержимое поля ввода в строке (1)
    }

    render() {
        return (
            <div>
                <Search />
                <button onClick={this.handleSubmit} ></button>
            </div>
        );
    }
}
javascript

1 个回答

  1. Best Answer

    你可以这样做：

    首先，组件Search需要添加一个方法来执行我们需要的操作——重置值text。

    resetText() {
    this.setState({text: ''});
}

    其次，为了从父组件调用这个方法，你需要添加ref到组件Search

    <Search ref='search'/>

    最后，通过引用子组件来调用此方法this.refs

    this.refs.search.resetText();

    这是整个代码：

    class Search extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this); 
        this.state = {text: ''};
    }

    resetText() {
        this.setState({text: ''});
    }

    handleChange(event) {
        let text = event.target.value;

        this.setState({ text });
    }

    render() {
        return <input type="text" onChange={this.handleChange} />; // (1)
    }
} 

class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit() {
        // При отправке нужно изменить содержимое поля ввода в строке (1)
        this.refs.search.resetText();
    }

    render() {
        return (
            <div>
                <Search ref='search' />
                <button onClick={this.handleSubmit} ></button>
            </div>
        );
    }
}

    解决示例中指出的问题的另一种（也是更可取的）方法text是将其存储在State父组件中App并将其传递给Searchvia props。在这种情况下，props您还需要为 传递一个 setter text。

    class Search extends React.Component {
    render() {
        return <input type="text" onChange={this.props.onChange} value={this.props.value}/>; (1)
    }
} 

class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleSearchChange = this.handleSearchChange.bind(this);
        this.state = {text: ''};
    }

    handleSubmit() {
        // При отправке нужно изменить содержимое поля ввода в строке (1)
        this.setState({text: ''})
    }

    handleSearchChange(event) {
        let text = event.target.value;

        this.setState({ text });
    }

    render() {
        return (
            <div>
                <Search value={this.state.text} onChange={this.handleSearchChange}/>
                <button onClick={this.handleSubmit} ></button>
            </div>
        );
    }
}
    • 3

相关问题