ReactJSフィールドは動的フィールドに対して編集できません

Question

JSONを使用して動的にフィールドを作成する必要があります。 必要に応じてコンポーネントを作成しました。ページには必須フィールドが表示されます。 しかし、InputField jsファイルにonchange関数があっても、フィールドは編集不可能な状態です。以下は私のコンポーネントのコードの一部です

onChange(event) { 
     this.setState({ 
      [event.target.name]: event.target.value 
     }) 
    } 
    render() { 
     return (
      this.props.screenField.fieldType === 'INPUT' 
      ? <div className='form-group'> 
        <label htmlFor={this.props.screenField.name}>{this.props.screenField.label}:</label> 
        <input type={this.props.screenField.dataType === 'BOOLEAN' 
         ? 'checkbox' 
         : this.props.screenField.dataType} 
         name={this.props.screenField.name} 
         id={this.props.screenField.name} 
         placeholder={this.props.screenField.helpText} 
         required={this.props.screenField.isRequired} 
         value={this.props.screenField.value} className='form-control' 
         onChange={this.onChange.bind(this)}/> 
       </div> 
      : null 
     ) 
    } 

コード全体の下のURLを見つけてください。

https://github.com/yvsivateja/ReactJSApplications/tree/one/React-json-render

Answer 1

ザ・哲学の小道具は不変であるべきで、あなたが何かを変更する必要がある場合の状態を使用することで反応します。

状態を小文字ではなく、状態にバインドします。あなたはそれが通常は良い習慣であるようにレンダリング機能のうち、すべてのロジックを移動する場合があります

value={this.state[this.props.screenField.name]} className='form-control' 

Answer 2

：状態へ

constructor(props) { 
    super(props); 
    this.state = {[this.props.screenField.name] : this.props.screenField.value}; 
} 

がバインド：コン​​ストラクタで初期状態を設定します。レンダリング関数には、HTMLと同様に、宣言的に定義されたコンポーネントのみが含まれている必要があります。

欠落しているようなものは、JSX内の式を評価するために使用される中括弧です。あなたは今、return文で持っているものは何でも{}で囲む必要があります。

{this.props.... === 'INPUT' ? ... : ...} 

私は前に述べたように、外にレンダリングすることを移動について考えます。戻り値の前にifステートメントを使用することができます。別のオプションは、divを独自のコンポーネントに抽出することです（または単にヘルパー関数から返す）。