Javascript 清除带有子组件的父组件的状态

我有两个基于

类的组件

父组件：应用程序

import React, { Component } from 'react';
import Navbar from './Navbar';
import SearchBar from './SearchBar';

class App extends Component {
    state = {
        search: ''
    }

    getSearchFromSearchBar = (searchBarData) => {
        this.setState({ search: searchBarData })
    }

    render() {
        return (
            <div>
                <Navbar />
                <div className='section'>
                    <div className='container'>
                        <h1 className='title has-text-weight-light is-size-2' style={{ fontFamily: 'Bungee' }}>Search a video</h1>
                        <SearchBar onUserClick={this.getSearchFromSearchBar} search={this.state.search} />
                        <p>
                            Parent: {this.state.search}
                        </p>
                    </div>
                </div>
            </div>
        )
    }
}


export default App;

import React，{Component}来自'React'；
从“/Navbar”导入导航栏；
从“./SearchBar”导入搜索栏；
类应用程序扩展组件{
状态={
搜索：“”
}
getSearchFromSearchBar=（searchBarData）=>{
this.setState（{search:searchBarData}）
}
render（）{
返回(
搜索视频

父项：{this.state.search}

)
}
}
导出默认应用程序；

子组件：搜索栏

import React, { Component } from 'react';

class SearchBar extends Component {
    state = {
        search: ''
    }

    handleClick = async (event) => {
        event.preventDefault();
        this.props.onUserClick(this.state.search)
    }

    getUserInput = async (event) => {
        this.setState({ search: event.target.value })
    }

    render() {
        return (
            <div className='row'>
                <div className='field has-addons'>
                    <div className='control has-icons-left is-expanded'>
                        <input className="input is-medium" value={this.state.search} onChange={this.getUserInput} id="search" type="text"></input>
                        <span className="icon is-small is-left">
                            <i className="fas fa-search"></i>
                        </span>
                    </div>
                    <p className='control'>
                        <button className={`button is-info is-medium`} onClick={this.handleClick}>
                            <span className={`icon`}>
                                <i className='fas fa-search'></i>
                            </span>
                            <span style={{ fontFamily: 'Bungee' }}>
                                Search
                            </span>
                        </button>
                    </p>
                    <p className='control'>
                        <button className={`button is-danger is-medium`} onClick={() => this.setState({ search: '' })}>
                            <span className={`icon`}>
                                <i className='fas fa-search'></i>
                            </span>
                            <span style={{ fontFamily: 'Bungee' }}>
                                Clear
                            </span>
                        </button>
                    </p>
                </div>

            </div>
        )
    }
}


export default SearchBar;

import React，{Component}来自'React'；
类搜索栏扩展组件{
状态={
搜索：“”
}
handleClick=async（事件）=>{
event.preventDefault（）；
this.props.onUserClick（this.state.search）
}
getUserInput=async（事件）=>{
this.setState（{search:event.target.value}）
}
render（）{
返回(

搜寻


this.setState（{search:'}）}>
清楚的

)
}
}
导出默认搜索栏；

当用户单击
清除
按钮时，我试图从父组件中清除
状态
。我很难做到这一点，因为在JSX上调用this.handleClick时无法发送参数。有解决办法吗

我同时管理两个州，这是正确的方法吗？我尝试过使用道具，但无法修改，因为它是只读属性。
有两种状态没关系。子对象中的状态维护输入中的文本。父项中的状态是用户搜索的实际术语，对吗？我会给它们起不同的名字，这样很明显它们有不同的目的，比如父项中的
searchedTerm
与子项中的
value
或类似的东西。其中一个在每次键盘点击时都会发生变化（输入中显示的子项中的值），另一个状态是用户想要搜索的实际术语（点击后）

您完全可以将参数传递给函数

<button className={`button is-info is-medium`} onClick={() => this.handleClick(this.state.search)}>

家长：

  <SearchBar onUserClick={this.getSearchFromSearchBar} 
    search={this.state.search} 
    clearClicked={() => this.setState({ search: '' })} 
  />

this.setState（{search:'}）}
/>
确实，您可以传递参数，请检查这一点，当用户单击“清除”按钮时，直接从父对象清除子对象的状态如何。为此进行了编辑。还有一个输入错误。非常感谢，我用这个.setState（{search:'}）清除了子状态，用回调函数pass-through-props清除了父状态。-------{this.setState（{search:'}）；this.props.onUserClick（'''}}}>没问题，如果对您有效，请将此标记为已接受，如果您还有任何问题，请随时在此处发表评论，我很乐意提供帮助（或链接到新问题）
  <SearchBar onUserClick={this.getSearchFromSearchBar} 
    search={this.state.search} 
    clearClicked={() => this.setState({ search: '' })} 
  />