Question

我的代码如下;

[2018-05-21T14:34:31.982+0100] [glassfish 5.0] [WARNING] [] [org.glassfish.grizzly.filterchain.DefaultFilterChain] [tid: _ThreadID=100 _ThreadName=http-listener-2(2)] [timeMillis: 1526909671982] [levelValue: 900] [[
  GRIZZLY0013: Exception during FilterChain execution
java.lang.NoClassDefFoundError: sun/security/ssl/SupportedEllipticCurvesExtension
        at sun.security.ssl.HelloExtensions.<init>(HelloExtensions.java:82)
        at sun.security.ssl.HandshakeMessage$ClientHello.<init>(HandshakeMessage.java:362)
        at sun.security.ssl.ServerHandshaker.processMessage(ServerHandshaker.java:223)
        at sun.security.ssl.Handshaker.processLoop(Handshaker.java:984)

我在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;内置textarea容器，我希望在div上点击鼠标时更改textarea容器颜色。我尝试过很多东西但都失败了。没有国家可以这样做吗？

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()

}

这是这些变化的工作版本：

＆＃13;

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')
);

＆＃13;

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

＆＃13;

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()强制退回，但不建议这样做。只更新状态几乎总是更好。

See Docs

Answer 4

要对UI进行更改，组件需要重新呈现。要重新渲染组件，您的州或道具需要更改，或者您需要拨打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>
  );
}

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

4 个答案: