反应道具undefined里面的构造和存在渲染

我试图创建一个受控制的文本区域。反应道具undefined里面的构造和存在渲染

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函数之后运行渲染函数？

来源

2017-10-19 Wolfyaskingstuff

从'this.props'中删除'this'并且它应该按预期工作。 – mersocarlin

你不能在你的构造函数中使用'props.initial'吗？ – Walk

超级建立这个正确的，所以这不应该改变任何东西 – Axnyff

要理解的重要部分是构造函数已经将道具作为参数接受，因此您可以直接在构造函数中使用道具作为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的将永远有一个更新的价值之一，二，这个子元素犯规需要有一个状态。它使管理大型反应的应用程序更容易和正确的思维定势，有一旦你开始试图实现终极版或者类似的框架来处理你的国家为你

来源

2017-10-19 12:37:13 Maru

我删除了这个，它仍然没有工作 – Wolfyaskingstuff

@Wolfyaskingstuff你尝试在构造函数中种植一个'调试器'，然后在构造函数运行时检查'props.initial'是否有值吗？它可能是'props'正在填充在以后的时间 – Maru

它确实如此，但我不知道为什么 – Wolfyaskingstuff

从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>

来源

2017-10-19 12:50:34 mersocarlin

这很好，如果我把一个字符串，而不是props.initial，但它仍然只是一个未定义。 – Wolfyaskingstuff

我不明白。您想做什么？你是否发送了一个字符串作为'initial' prop或不？ – mersocarlin

我正在发送一个字符串。我的意思是，如果我发送了一个硬编码的字符串，它的工作，如果我发送的初始道具（也是一个字符串）它不能 – Wolfyaskingstuff

你必须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}/> 
}

来源

2017-10-19 13:40:57

我实际上向我的帖子添加了一个编辑，解释了他们为什么未定义。我现在只需要解决另一个问题 – Wolfyaskingstuff

反应道具undefined里面的构造和存在渲染

回答

相关问题