Question

你好我想改变我的div的颜色，当我在输入中输入任何任何值时..但我不知道如何设置背景颜色以及如何在状态下采取颜色请帮助我

constructor(props)
{
super(props)
this.state={
  name:'',
  color:false,
  backgroundcolor:''

}
this.onChange=this.onChange.bind(this);

}
onChange(event)
{
event.preventDefault();
this.setState({[event.target.name]:event.target.value});
console.log(this.state);
this.props.come(this.state.name);
console.log('hello this is from name box',this.state.name);
this.setState({color:true});
console.log(this.state.color);
}

render() {
return (

   <div class="home">
   <h3>This is Function#1</h3>
   <p>Have You noticed The Changing ,How fast react works</p>
   <div>
       <label>Your Name:</label>
       <input type="text" name="name"onChange={this.onChange} placeholder="Enter your Name"/>
   </div>
   <br>
  </br>
   <div>
     {this.props.sendname.newname}
  </div>

  <div>
   /*this is my div where i want color*/

    </div>
  </div>
)

Answer 1

this.setState({ backgroundcolor: "#f0f' });    
<div style={{ backgroundColor: "#f0f' }};

或

let divStyle = { backgroundColor: this.state.backgroundColor };
<div style = {divStyle}>Hello world</div>

Answer 2

您可以使用对象设置div的样式，在您的情况下，该对象将包含您的背景颜色。请记住，react采用CSS属性，但只使用camelCase而不是连字符。

因此，对于background-color属性，您需要将其称为backgroundColor。

所以你的div看起来像这样：

<div style={{backgroundColor: this.state.backgroundcolor}}>
</div>

请记住，您可以在react组件中添加任意数量的样式属性。他们都需要成为骆驼案。假设您还想将字体大小属性添加到此div，您可以这样做：

<div style={{backgroundColor: this.state.backgroundcolor, fontSize: someSize}}>

一旦你有可能想要在标签中添加的各种属性，你就可以使用一个对象：

const styles = {
   backgroundColor: backgroundColor,
   fontSize: someSize,
   color: someColor,
   padding: paddings
}
...
<div style={styles}>

现在，对于问题的第二部分，只需在输入中有任何内容时更改背景颜色状态即可。可以在州或您的onChange函数中进行此项检查。

这样的事情：

onChange (value) {
  if(value) {
    this.setState({backgroundcolor: '[WHATEVER COLOR YOU WANT IT TO CHANGE TO]'})
  } else {
    this.setState({backgroundcolor: ''})
  }
}

以下是适用于您的应用的简单版本：

class App extends React.Component{
  constructor (props) {
    super(props)
    this.state = {
      inputValue: '',
      backgroundcolor: ''
    }
  }
  onChange(inputEntry) {
    if (inputEntry) {
      this.setState({inputValue: inputEntry, backgroundcolor: '#FF0000'}) // here I want to change the color to red
    } else {
      this.setState({inputValue: inputEntry, backgroundcolor: ''}) // leave empty for default
    }
  }
  
  render(){
    const { backgroundcolor } = this.state

    return (
     <div>
        <input 
          value={this.state.inputValue}
          onChange={(evt) => this.onChange(evt.target.value)}
         />
         <div style={{backgroundColor: backgroundcolor}}>
          <h1>background color to change here!</h1>
         </div>
     </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<div id="app"></div>
<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的颜色

2 个答案: