反應道具undefined裏面的構造和存在渲染

Question

我試圖創建一個受控制的文本區域。

class TextArea extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state= { 
     text: this.props.initial 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    } 

handleChange(event) { 
    //some handle 
} 

render() { 
    return (
     <textarea 
      value={this.state.text} 
      placeholder={this.props.initial} 
      onChange={this.handleChange} 
     /> 
    ); 
    } 
} 

出於某種原因，如果我在構造函數中，我得到一個未定義的CONSOLE.LOG this.props.initial。

但佔位符工作。

我想要做的是放棄佔位符，並設置一個初始值，以便用戶可以編輯，複製和交互。 （基本上是正常的文本，而不是佔位符，但我不能這樣做，因爲它不起作用）

我在做什麼錯了？

編輯： ，我路過props.initial到textarea的方式：

<TextArea 
    initial={this.state.json.initial} 
    text={this.state.json.text} 
    changeHandler={this.handleChange} 
/> 

我正在從$ .getJSON調用中的JSON和我認爲JSON通話結束前，textarea的被渲染。是否有任何方法只能在componentWillMount函數之後運行渲染函數？

Answer 1

要理解的重要部分是構造函數已經將道具作爲參數接受，因此您可以直接在構造函數中使用道具作爲props。不需要，只要你是通過this.props訪問它的構造

constructor(props) { 
    super(props); 
    this.state= { 
    text: props.initial 
    } 
} 

內上面的代碼應該工作

---

然而，這是構建一個組件就像TextArea，它應該有更好的方式也解決你的問題props.initial運行時沒有價值

首先，你需要準備handleChange方法在父組件

class ParentComponent extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     myTextArea: '' 
    } 

    this.handleChange = this.handleChange.bind(this) 
    } 

    handleChange (e) { 
    this.setState({myTextArea: e.target.value}) 
    } 

    render() { 
    return (
     <TextArea 
     value={myTextArea} 
     onChange={this.handleChange} 
     /> 
    ) 
    } 
} 

並且在文本區域組件上，當定義textarea的onchange方法時，引用通過道具傳遞的onchange方法。

<textarea 
    value={this.props.value} 
    placeholder="Something" 
    onChange={this.props.handleChange} 
/> 

---

這種方法的好處是，一個，調用textarea的將永遠有一個更新的價值之一，二，這個子元素犯規需要有一個狀態。它使管理大型反應的應用程序更容易和正確的思維定勢，有一旦你開始試圖實現終極版或者類似的框架來處理你的國家爲你

Answer 2

從this.props在構造函數中刪除this因爲你必須從訪問props它的參數列表。

class TextArea extends React.Component { 
 
    constructor(props){ 
 
    super(props) 
 
    
 
    this.state = { 
 
     text: props.initial, 
 
    } 
 
    
 
    this.handleChange = this.handleChange.bind(this) 
 
    } 
 
    
 
    handleChange(event){ 
 
    this.setState({ text: event.target.value }) 
 
    } 
 
    
 
    render(){ 
 
    return (
 
     <div> 
 
     <div>Initial text: {this.props.initial}</div> 
 
     <textarea 
 
      value={this.state.text} 
 
      placeholder={this.props.initial} 
 
      onChange={this.handleChange} 
 
     /> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <TextArea />, 
 
    document.getElementById('root') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 

 
<div id="root"></div>

Answer 3

你必須garantee該this.props。inital存在：

{ this.state.json && this.state.json.initial && 
    <TextArea initial={this.state.json.initial} text={this.state.json.text} changeHandler={this.handleChange}/> 
}