使用 React 切换元素 isHidden True/False答案

【问题标题】：Toggle element isHidden True/False with React使用 React 切换元素 isHidden True/False
【发布时间】：2018-08-12 03:12:12
【问题描述】：

我的代码有问题，我的切换按钮不显示子元素，但给了我一个完整的空白页这是代码

class App extends React.Component {
    constructor(props, context) {
            super(props, context);
            this.state = {items: [] , isHidden: true};
            this.toggleHidden = this.toggleHidden.bind(this);
    }

componentDidMount() {
        fetch("/customers") 
            .then(result=>result.json())
            .then(items=>this.setState({items}));
}

    toggleHidden () {

        this.setState({
          isHidden: !this.state.isHidden
        });

      }


    render() {

        return (
      <div id='customerDetails'>
      {this.state.items.map(item=><customerDetail>
            <div id={item._id} >
              <button onClick={this.toggleHidden} data-arg1={item._id} value='U'/>
              {item.cost} 
              {!this.state.isHidden && <Child >
                  <div className='modal'>
                  <form onSubmit={this._handleUpdate}>
                  <input type='text' id='cost' name='cost'/>
                  <input type='hidden' id="_id" name='_id' value=item.id />
                  <input type='submit' value='Update'/>
                </form>
                </div>
                  </Child>
              }
              </div>
        </customerDetail>)}

        </div>
        );
      }

}

任何想法，我不知道它是否来自迭代中发生的所有事实我还尝试了来自 StackOverflow React toggle component 的独立源代码，它应该可以工作，但它不起作用....空白页

任何想法

谢谢

【问题讨论】：

能否贴出customerDetail和子组件的代码
我没有额外的代码，都在我上面的代码里，可能这个有问题。

标签： javascript reactjs

【解决方案1】：

首先，您需要修复代码中的错误。将行 <input type='hidden' id="_id" name='_id' value=item.id /> 更改为 <input type='hidden' id="_id" name='_id' value={item.id} />

【讨论】：

【解决方案2】：

我刚刚在我的父组件渲染函数中尝试过这个：

<button onClick={this.toggleHidden} value='U'/>
              {item.cost} 
              {!this.state.isHidden && <Child />}

在代码的底部我添加了一个子类：

class Child extends React.Component {
    render() {

        return (    
                  <div className='modal'>
                  <form >
                  <input type='text' id='cost' name='cost'/>
                  <input type='hidden' id="_id" name='_id' />
                  <input type='submit' value='Update'/>
                  </form>
                  </div>           
        )             
    }
}

但我在切换时仍然有一个空白页

【讨论】：

【解决方案3】：

我让我的代码工作了，这里是：移除页面底部的子组件在开头添加一个函数CHild：

function Child(props) {
  return (
    <div className='modal'>
      <form onSubmit={props.onClick}>
        <input type='text' id='cost' name='cost'/>
        <input type='hidden' id="_id" name='_id' value={props.value} />
        <input type='submit' value='Update'/>
      </form>
    </div>  
  );
}

在我的父组件中添加了函数 renderChild ：

renderChild(i) {
  return (
    <Child
      value={i}
      onClick={() => this.props.onClick(i)}
    />
  );
}

最后在我的父组件的渲染中，替换行：

{!this.state.isHidden && <Child/>}

通过

{!this.state.isHidden && this.renderChild(item._id)}

现在我的切换功能可以工作了

【讨论】：