是否可以在不更改状态的情况下更改元素中的值?

Question

我有如下代码;

class Comment extends Component {
constructor(props) {
super(props);
const color = "red";
}
changeColor() {
this.color = "blue";
console.log(this.color);
}
render() {
return(
<div className="CommentPlaceHolder" style={{backgroundColor: this.color}}>
<form id="form1">
<textarea onFocus={this.changeColor} className="comment" id="feed" name="subject" placeholder="Write something.."></textarea>
<button type="submit" form="form1">Paskelbti</button>
</form>        
</div>
);
}
}
export default Comment;

我在容器内有一个textareadiv我希望在单击textarea鼠标时更改div容器颜色。我尝试了很多事情，但都失败了。没有国家可以做到这一点吗？

Answer 1

几件事：

首先，您在constructor中声明颜色的方式。您只是声明了一个本地const，无法从组件其他函数访问该。声明它的正确方法是使用this：

super(props);
this.color = "red";
}

接下来，在文本区域上的onFocus事件中，您没有正确触发函数。使用胖箭头执行此操作，如下所示：

<textarea onFocus={() => this.changeColor()} className="comment" id="feed" name="subject" placeholder="Write something.."></textarea>

现在。。。您不使用状态这一事实的问题是，当您更改组件的属性时，组件不会像使用this.setState时那样自动重新呈现。因此，您将不得不强制它重新渲染。幸运的是，有this.forceUpdate()功能。所以在changeColor函数中，只需调用它。

changeColor() {
this.color = "blue";
console.log(this.color);
this.forceUpdate()

}

以下是这些更改的工作版本：

class App extends React.Component {
constructor(props) {
super(props);
this.color = "red";
}
changeColor() {
this.color = "blue";
console.log(this.color);
this.forceUpdate()
}
render() {
return(
<div className="CommentPlaceHolder" style={{backgroundColor: this.color}}>
<form id="form1">
<textarea onFocus={() => this.changeColor()} className="comment" id="feed" name="subject" placeholder="Write something.."></textarea>
<button type="submit" form="form1">Paskelbti</button>
</form>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('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 id="app"></div>

Answer 2

我不建议手动更新 DOM，也不建议调用 this.forceUpdate(( - 这不是 React 的好习惯。

使用 setState(( 是获得所需正确结果的正确方法。对于一个小而简单的应用程序，我认为你可以做这样的事情：

import React, { Component } from 'react'
import styled from 'styled-components'
export default class ChangingDiv extends Component {
state = {
bgColor: 'red'
}
handleColorChange = () => {
const { bgColor } = this.state
bgColor === 'red'
?
this.setState({ bgColor: 'blue' })
:
this.setState({ bgColor: 'red' })
}
render() {
const { bgColor } = this.state
return (
<ColorDiv color={bgColor}>
<TextBox
onFocus={this.handleColorChange}
onBlur={this.handleColorChange}
/>
</ColorDiv>
)
}
}
const ColorDiv = styled.div`
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background-color: ${props => props.color};
`
const TextBox = styled.textarea`
width: 300px;
padding: 20px;
font-size: 16pt;
`

使用样式化组件，您可以根据状态属性设置颜色。在这里，我设置了 ColorDiv 的背景颜色以匹配 bgColor 状态道具。当它发生变化时，背景颜色也会发生变化。您甚至可以向 ColorDiv 添加过渡持续时间以获得更平滑的过渡。

如果你没有使用样式化的组件，你基本上可以做同样的事情，除了不做一个bgColor状态道具，你可以把它变成一个className。当您聚焦和模糊输入框时，类名称将更改：

import React, { Component } from 'react'
export default class ChangingDiv extends Component {
state = {
className: 'red'
}
handleColorChange = () => {
const { className } = this.state
className === 'red'
?
this.setState({ className: 'blue' })
:
this.setState({ className: 'red' })
}
render() {
const { className } = this.state
return (
<div className={className}>
<textarea
onFocus={this.handleColorChange}
onBlur={this.handleColorChange}
/>
</div>
)
}
}

如果您仍然不想设置颜色，那么您可以随时使用传统的document.getElementById('#colorDiv'(并以这种方式更改颜色。但这会破坏 React 的规则，因为你将直接操纵 DOM。

Answer 3

您可以调用this.forceUpdate()来强制重新渲染，但不建议这样做。更新状态几乎总是更好。

查看文档

Answer 4

要在 UI 中进行更改，组件需要重新呈现。要重新渲染组件，您的状态或 props 需要更改，或者您需要调用forceUpdate(不建议这样做(

代码的问题在于，您正在更改静态值，并且此更改在重新呈现之前不会反映在组件中。要更改此设置，您可以使用以下示例代码。

constructor(props) {
super(props);
this.state = { color: 'red' };
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return(
<div className="CommentPlaceHolder" style={{backgroundColor: this.state.color}}>
{/* some other code */}
</div>
);
}