Reactjs-集成富文本编辑器失去状态范围
我是reactjs新手，我正在尝试将富文本编辑器集成到组件中。组件本身有点复杂，包含各种逻辑来循环json片段 我想将富文本编辑器放在组件中——但当我将调用它的代码放在组件中时——我失去了它的作用域——它抱怨this.state 这是富文本编辑器标记Reactjs-集成富文本编辑器失去状态范围,reactjs,loops,rich-text-editor,Reactjs,Loops,Rich Text Editor,我是reactjs新手，我正在尝试将富文本编辑器集成到组件中。组件本身有点复杂，包含各种逻辑来循环json片段 我想将富文本编辑器放在组件中——但当我将调用它的代码放在组件中时——我失去了它的作用域——它抱怨this.state 这是富文本编辑器标记 <RichTextEditor value={this.state.value} onChange={this.onChang
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
/>
return (
<div>
<MetaSpecific title={lang.metaData.title} description={lang.metaData.description} />
<Intercom appID='bg69flze' custom_launcher_selector='.open_intercom' />
<Spacers />
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
/>
<div className='background--white background--white--medium background--white--small'>
{
lang.status[0].items.map(function (item, index) {
return (
<div key={index}>
{
(lang.status[0].dashboard === 'expert')
// after interview section - professional
? <Expert lang={lang} item={item} />
// after interview section - employer
: (lang.status[0].dashboard === 'employer')
? <Employer lang={lang} item={item} />
: null
}
<Row type='flex' justify='center' className='border__transparent--top' style={{maxWidth: '1200px', marginLeft: 'auto', marginRight: 'auto'}}>
<form>
{
(lang.status[0].dashboard === 'employer')
// after interview section - professional
? <EmployerPanel lang={lang} />
: null
}
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Shareholder agreement for a UK startup</h3>
<Row>
<Col xs={7} md={7} lg={7}>
<h3 style={{paddingBottom: '30px'}}>Projektfrist</h3>
</Col>
<Col xs={5} md={5} lg={5}>
16 June 2017
</Col>
</Row>
<h3 style={{paddingBottom: '30px'}}>Projektbeschreibung</h3>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Vorschlag zur Provision</h3>
<Row>
<Col xs={7} md={7} lg={7}>
Vergutungsmodell
</Col>
<Col xs={5} md={5} lg={5}>
Fixed rate
</Col>
</Row>
<br />
<Row>
<Col xs={7} md={7} lg={7}>
Fix Vergutung exkl. MwSt. (€)
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='Final Price' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
<Row>
<Col xs={7} md={7} lg={7}>
Ihr angestrebtes Projecktende
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='16/06/2017' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Beschreibung de Angebots</h2>
<h2 className='text--font-size-14'>xx xx xx xx xx xx</h2>
<p className='text--font-size-14'><Input type='textarea' rows={4} /></p>
<p>RICH TEXT</p>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Mandatscereinbarung</h2>
<Input type='submit' value='PDF hochladen' style={{width: '200px', color: '#ffffff'}} />
</div>
</Col>
</form>
</Row>
</div>
)
})
}
</div>
</div>
)
返回(
{
lang.status[0]。items.map（函数（项，索引）{
返回(
{
（lang.status[0]。仪表板==“专家”）
//面试后部分-专业
?
//面试后部分-雇主
：（lang.status[0]。仪表板==“雇主”）
?
：null
}
{
（lang.status[0]。仪表板==“雇主”）
//面试后部分-专业
?
：null
}
一家英国初创公司的股东协议
项目第一
2017年6月16日
贝施雷邦项目
这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述这是项目说明。这是项目说明。这是项目说明。这是项目说明。这是项目说明
这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述这是项目说明。这是项目说明。这是项目说明。这是项目说明。这是项目说明
沃施拉格-祖尔条款
维古通斯莫代尔
固定利率
修复Vergutung exkl.MwSt.（&euro；）
Ihr angestrebtes项目
贝施雷本德安格博茨酒店
xx xx xx xx xx
富文本
Mandatscreinbarung
)
})
}
)
return (
<div>
<MetaSpecific title={lang.metaData.title} description={lang.metaData.description} />
<Intercom appID='bg69flze' custom_launcher_selector='.open_intercom' />
<Spacers />
<div className='background--white background--white--medium background--white--small'>
{
lang.status[0].items.map(function (item, index) {
return (
<div key={index}>
{
(lang.status[0].dashboard === 'expert')
// after interview section - professional
? <Expert lang={lang} item={item} />
// after interview section - employer
: (lang.status[0].dashboard === 'employer')
? <Employer lang={lang} item={item} />
: null
}
<Row type='flex' justify='center' className='border__transparent--top' style={{maxWidth: '1200px', marginLeft: 'auto', marginRight: 'auto'}}>
<form>
{
(lang.status[0].dashboard === 'employer')
// after interview section - professional
? <EmployerPanel lang={lang} />
: null
}
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Shareholder agreement for a UK startup</h3>
<Row>
<Col xs={7} md={7} lg={7}>
<h3 style={{paddingBottom: '30px'}}>Projektfrist</h3>
</Col>
<Col xs={5} md={5} lg={5}>
16 June 2017
</Col>
</Row>
<h3 style={{paddingBottom: '30px'}}>Projektbeschreibung</h3>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Vorschlag zur Provision</h3>
<Row>
<Col xs={7} md={7} lg={7}>
Vergutungsmodell
</Col>
<Col xs={5} md={5} lg={5}>
Fixed rate
</Col>
</Row>
<br />
<Row>
<Col xs={7} md={7} lg={7}>
Fix Vergutung exkl. MwSt. (€)
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='Final Price' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
<Row>
<Col xs={7} md={7} lg={7}>
Ihr angestrebtes Projecktende
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='16/06/2017' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Beschreibung de Angebots</h2>
<h2 className='text--font-size-14'>xx xx xx xx xx xx</h2>
<p className='text--font-size-14'><Input type='textarea' rows={4} /></p>
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
/>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Mandatscereinbarung</h2>
<Input type='submit' value='PDF hochladen' style={{width: '200px', color: '#ffffff'}} />
</div>
</Col>
</form>
</Row>
</div>
)
})
}
</div>
</div>
)
返回(
{
lang.status[0]。items.map（函数（项，索引）{
返回(
{
（lang.status[0]。仪表板==“专家”）
//面试后部分-专业
?
//面试后部分-雇主
：（lang.status[0]。仪表板==“雇主”）
?
：null
}
{
（lang.status[0]。仪表板==“雇主”）
//面试后部分-专业
?
：null
}
一家英国初创公司的股东协议
项目第一
2017年6月16日
贝施雷邦项目
这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述。这是项目描述这是项目说明。这是项目说明。这是项目说明。这是项目说明。这是项目说明
这是项目说明。这是项目说明。这是项目说明。这是项目说明。这是项目说明。这是项目说明。这是项目说明。这是项目说明。这是pr