入力タグ内に状態を表示する方法

Question

次の反応コンポーネントを作成し、入力ボックスに非表示を追加しようとしています。

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

Iはまた、{this.state.display}を試みたが、私は、入力type属性の使用予期しないトークン

Answer 1

得る：styleを使用

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

：

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

を

状態オブジェクト内のdisplay: hidden〜display: noneを変更してください。

Answer 2

displayをvisibilityに置き換えるか、hiddenをnoneに置き換えます。

{display: 'none'}または{visibility: 'hidden'}のいずれかです。

@Linasの回答が有効です。私は意味：

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

または

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

どちらも同じレンダリング。

Answer 3

あなたは、特にあなたのコードに若干の変更をしなければならない...私はそれはあなたが求めているものだと信じている、<input type="checkbox" id="boldCheckbox" hidden />ようなあなたのコードで表示するには、タグの小道具としてhiddenが必要な場合：

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


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

displayの下にあるhiddenの状態を非表示にするには、nullまたはundefined以外に設定します。

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