Question

我正在构建以下react组件并尝试将hidden添加到我的输入框中。

class FontChooser extends React.Component {

constructor(props) {
super(props);
this.state={display:'hidden'};
}


render() {

return(
       <div>
          <input type="checkbox" id="boldCheckbox" this.state.display />           
       </div>
);
}
}

我也试过{this.state.display}，但我得到了意外的令牌

Answer 1

如果您明确需要hidden作为标记的道具，请在您的代码中显示<input type="checkbox" id="boldCheckbox" hidden />，我相信这就是您所要求的......您必须稍作修改你的代码：

constructor(props) {
  super(props);
  this.state = { 
    display: {
      hidden: undefined
    }
  };
}


render() {
  return (
    <div>
      <input type="checkbox" id="boldCheckbox" {...this.state.display} />
    </div>
  )
}

为了隐藏，您可以将hidden下的display状态设置为null或undefined以外的任何内容。

所以：this.setState({display: { hidden: <STATECHANGE>}})

Answer 2

使用输入type属性：

<input type="text" type={this.state.display} />

使用style：

<input type="text" style={{...this.state}} />

并将状态对象中的display: hidden更改为display: none。

Answer 3

要么display替换visibility，要么hidden替换none。

您有{display: 'none'}或{visibility: 'hidden'}。

然后@Linas的回答将是有效的。我的意思是：

<input type="text" style={this.state} />

或

<input type="text" style={{...this.state}} />

两者呈现相同。

如何在输入标签内显示状态

3 个答案: