Question

我的代码有问题，我的Toggle按钮不会显示Child元素，但会给我一个完整的空白页面这是代码

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这个独立的源代码，它应该可以工作，而且不起作用....空白页

任何想法

由于

Answer 1

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

Answer 2

我刚刚在我的父组件渲染功能中尝试了这个：

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

在代码的底部我添加了一个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>           
        )             
    }
}

但是在切换时我还有一个空白页

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

现在我的切换功能正常工作

使用React将Toggle元素隐藏为True / False

3 个答案: