将文本区域值保存为与ReactJs div
我只是想处理反应，所以我的问题可能看起来很简单，但我仍然坚持它。将文本区域值保存为与ReactJs div
我有两个块（div.user-data__row），其中有一些值。我更改组件的状态（handleChange函数），这些块被替换为文本字段（textarea.text）的状态，我希望当我单击保存按钮并调用saveChange函数时，每个文本字段的值被传送到块（第1个文本区到第1个块等）。
我找到了使用ref属性来解决类似情况的例子，但后来发现这不再是一个实际的解决方案，因此也没有人会这样做。请帮我看看实际的实现路径。
class UserData extends React.Component {
constructor(props) {
super(props);
this.state = {
edit: true,
};
this.handleChange = this.handleChange.bind(this);
this.saveChange = this.handleChange.bind(this);
}
handleChange() {
this.setState(() => ({
edit: !this.state.edit,
}));
}
saveChange() {
this.setState(() => ({
edit: false
}))
}
render() {
if (this.state.edit) {
return (
<div className="user-data">
<div className="user-data__row">{this.props.userData.name}</div>
<div className="user-data__row">{this.props.userData.email}</div>
<button onClick={ this.handleChange }>Edit</button>
</div>
);
} else {
return (
<div className="user-data">
<textarea className="text" defaultValue={this.props.userData.name}></textarea>
<textarea className="text" defaultValue={this.props.userData.email}></textarea>
<button onClick={ this.saveChange }>Save</button>
</div>
)
}
}
}
因为props是只读的，因为& userData (email+name)可以在组件内部发生变化，你必须填写道具值在状态，则管理状态之后就足够了。
此外，你需要通过你的文字区域不受控制的组件转换为控制组件：
使用值，而不是默认值
实施的onChange与该值作为处理程序的setState。
textarea的值应该从状态中读取而不是props。
如果<UserData />道具可以从整个生命周期之外进行更新，则需要componentWillReceiveProps以后。您也有错字if (!this.state.edit) {而不是if (this.state.edit) {。
class UserData extends React.Component {
state = {
edit: true,
userDataName: this.props.userData.name, // Populate props values
userDataEmail: this.props.userData.email, // Populate props values
};
handleChange =() => {
this.setState((state) => ({
edit: !state.edit,
}));
}
saveChange =() => {
this.setState(() => ({
edit: false
}))
}
render() {
if (!this.state.edit) {
return (
<div className="user-data">
<div className="user-data__row">{this.state.userDataName}</div>
<div className="user-data__row">{this.state.userDataEmail}</div>
<button onClick={ this.handleChange }>Edit</button>
</div>
);
} else {
return (
<div className="user-data">
<textarea className="text" value={this.state.userDataName} onChange={(e) => this.setState({userDataName: e.target.value})}></textarea>
<textarea className="text" value={this.state.userDataEmail} onChange={(e) => this.setState({userDataEmail: e.target.value})}></textarea>
<button onClick={ this.saveChange }>Save</button>
</div>
)
}
}
}
ReactDOM.render(<UserData userData={{name: 'Abdennoor', email: '[email protected]'}} /> , document.querySelector('.app'))<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 class="app" />
你从this.props接收<div>值，这意味着它们的值应来自于一些外部源，并传递给您的组件。将这些值传递给组件props的方法不在此问题的范围之内，它可以以非常不同的方式实现。通常它来自父组件或来自某个连接的商店。
您需要从<textarea>表单字段获取值，可以直接使用（使用ref）或使用某个提供表单处理的第三方库来完成。然后，这些值需要直接从组件的state或外部源（通过props）存储（并获得）。
不幸的是，您的问题的范围太广泛，无法给出更准确的答案，但希望这些信息能够引导您找到某种解决方案。
您还可以使用contentEditable，它可以让你编辑div的内容。
class UserData extends React.Component {
constructor(props) {
super(props);
this.state = {
edit: true
};
this.handleChange = this.handleChange.bind(this);
}
handleChange() {
this.setState(() => ({
edit: !this.state.edit
}));
}
render() {
const { edit } = this.state;
return (
<div className="user-data">
<div className="user-data__row" contentEditable={edit}>{this.props.userData.name}</div>
<div className="user-data__row" contentEditable={edit}>{this.props.userData.email}</div>
<button onClick={this.handleChange}>
{edit ? Save : Edit}
</button>
</div>
)
}
}
感谢您的好解释，先生！ –
欢迎Valdimir。 –