預先填充受控組件

在我嘗試處理更新表單時，已經編寫了下面的代碼。它是一個受控輸入組件，具有相應的狀態值。當輸入組件發生更改時，狀態值會更新。這意味着視圖總是會反映數據的變化，反之亦然。我試圖用數據庫中的數據預填充輸入組件時出現問題。我的嘗試是在構造函數中定義初始狀態值，以等於傳遞的道具，但這並不起作用。當組件第一次呈現時，它不會包含傳遞的靈魂道具，因爲它尚未被提取。當組件第二次呈現時（因爲數據已準備好）構造函數將不會被調用。如何在數據準備好而不是之前設置初始狀態？預先填充受控組件

SpiritsEditContainer

export default createContainer(({params}) => { 
    const handle = Meteor.subscribe("spirit", params.id); 

    return { 
     loading: !handle.ready(), 
     spirit: Spirits.find(params.id).fetch()[0] 
    } 
}, SpiritsEditPage);

SpiritsEditPage

export default class SpiritsEditPage extends Component { 
    constructor(props) { 
     super(props) 

     this.state = {name: this.props.spirit.name} 
    } 

    handleNameChange(event) { 
     this.setState({name: event.target.value}); 
    } 

    handleUpdate(event) { 
     event.preventDefault(); 
    } 

    render() { 
     const {name} = this.state; 

     if (this.props.loading) { 
      return <div>loading</div> 
     } else { 
      return (
       <div> 
        <h1>SpiritsEditPage</h1> 

        <form onSubmit={this.handleUpdate.bind(this)}> 
         <Input type="text" 
           label="Name" 
           value={name} 
           onChange={this.handleNameChange.bind(this)}/> 


         <button>Update</button> 
        </form> 
       </div> 
      ) 
     } 
    } 
}

來源

2016-09-24 svendjokumsen

你可以用你的問題來解釋問題的發生地點嗎？例如，預填充的表單如何改變應用程序的功能？ –

構造函數的代碼可能無法正常工作：

constructor(props) { 
     super(props) 

     this.state = {name: this.props.spirit.name} 
    }

相反檢查props.spirit是阿瓦伊拉布勒。

this.state = { name: this.props.spirit && this.props.spirit.name }

添加componentWillReceiveProps：

componentWillReceiveProps(nextProps) { 
    if (nextProps.spirit !== this.props.spirit) { 
    this.setState({ name: nextProps.spirit.name }); 
    } 
}

的代碼的其餘部分看起來沒事。

來源

2016-09-25 16:07:23 vijayst

預先填充受控組件

回答

相關問題