ReactJS字段不可編輯動態字段

我有一個需求，其中我需要通過JSON動態創建字段。我已經根據需要創建了我的組件，並使用必填字段呈現頁面。但是這些字段處於不可編輯的狀態，即使我在InputField js文件中有一個onchange函數。以下是我的組件代碼的一部分ReactJS字段不可編輯動態字段

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

請在下面的示例中查找完整的代碼。

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

來源

2017-03-17 Pathfinder

那麼問題是什麼？ – nbkhope

的陣營理念是道具應該是一成不變的，如果你需要改變一些東西使用的狀態。

將值綁定到非props狀態。在構造函數中設置的初始狀態：

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

結合狀態：

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

來源

2017-03-17 16:43:56 MrCode

這工作謝謝 – Pathfinder

當onSubmit被點擊時，我如何通過所有這些領域？ – Pathfinder

您的onSubmit活動在哪裏？我會在這裏遵守州的原則，但是將其向上移動以使輸入的形式或父母維持狀態，並且也可以是onChange函數的位置。然後您可以將onChange函數作爲道具傳遞。 – MrCode

您可能希望將所有的邏輯出了渲染功能，如通常是很好的做法。渲染函數應該只包含以聲明方式定義的組件，就像HTML一樣。

你似乎缺少的一件事是用於評估JSX內部表達式的大括號。無論您在返回語句現在應該用{}：

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

正如我前面提到的，想想移動該外面渲染。也許你可以在返回之前使用if語句。另一種選擇是將div提取到它自己的組件中（或者只從輔助函數中返回它）。

來源

2017-03-17 16:44:38 nbkhope

ReactJS字段不可編輯動態字段

回答

相關問題