Question

我有在网页上显示数据的组件我想写另一个组件并在其中创建buutton。只需在单击按钮时隐藏其他组件并显示基本输入字段表单。

我的代码是这样的

组件应用

    class  App extends React.Component{

    constructor(props) {
       super(props);
      this.state= {
        filter: null,
        };
       this.setFilter = this.setFilter.bind(this);

     }

    setFilter(filter) {
       this.setState({filter: filter})
    }


     render(){


       let filteredPassword = details_data.filter(
        (detail) =>{
            console.log(detail.website.toLowerCase(), this.state.filter)
            return detail.website.toLowerCase().indexOf(this.state.filter)!= -1;
        }
       );

       return (

        <ul>
            <Filter onUpdateFilter={this.setFilter} />
            {
                filteredPassword.map((detail)=>{
                    return <Detail item={detail}
                    key={detail.id}/>
                })
            }

        </ul>

     )
   }
}

另一个细节组件 class Filter扩展了React.Component {

constructor() {
    super();
    this.state={
        search: 'Search'
      }
  }

   updateSearch(event) {
    this.props.onUpdateFilter(event.target.value.substr(0,40))
  }

   formShow(){

   }

  render() {

    return (
        <div>

            <input id="search" type="text" placeholder={this.state.search} onChange={this.updateSearch.bind(this)}/>
            &nbsp; &nbsp;&nbsp; &nbsp;
            <input id="button1" type="button" value="+" onClick={this.formShow()}/>


        </div>
       )
   }
 }

很少有这样的其他组件。

我试图隐藏表格，上面的表格按钮用于＆＃34;显示表格＆＃34;按钮。

  class Form extends React.Component {



    render() {

      return(
        <div>
        <form>

            <input type="text" placeholder="username" />
            <input type="password" placeholder="username" />

        </form>
          </div>
      )


   }
 }

指导我如何做到这一点..谢谢

Answer 1

在没有对代码看太多的情况下（它有点混乱），在我看来，你想要实现的是沟通两个组件。组件A将对按钮单击事件做出反应并告诉：1）组件B隐藏，2）组件C显示。

这样做的方式取决于组件是否具有层次关系。我建议首先阅读官方React文档的chapter。然后，here也是关于React中组件通信策略的精彩文章。

最重要的是，一些专注于此的模式取得了巨大成功，例如Flux或Redux。

希望它有所帮助。

onclick在react.js中显示和隐藏数据

1 个答案: