1、使用class样式显示或者不显示,但是浏览器控制台会发现Warning警告:
index.js:1437 Warning: Invalid DOM property `class`. Did you mean `className`?
in input (at Xiaojiejie.js:19)
in div (at Xiaojiejie.js:18)
in Xiaojiejie (at src/index.js:5)
把class换成className,防止与js中的class类名冲突
2、如果想在文本框里输入一个<h1>
标签,并进行渲染。默认是不会生效的,只会把 <h1>
标签打印到页面上,这并不是我想要的。如果工作中有这种需求,可以使用dangerouslySetInnerHTML
属性解决。具体代码如下:
import React, { Component } from 'react';
import style from './style.css';
class Service extends Component {
render() {
return (
<div>
<div>
<label html="zlk">加入服务:</label>
<input className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>
<button onClick={this.addList.bind(this)}>增加菜单</button>
{/* dangerouslySetInnerHTML渲染原生html */}
<p dangerouslySetInnerHTML={{__html:this.state.text}}></p>
</div>
<ul>
{
this.state.list.map((item,index) =>{
return <li key={index+item}
onClick={this.dellistItem.bind(this,index)}
>
{item}
</li>
})
}
</ul>
</div>
)
}
inputChange(e){
e.persist();
console.log(e.target.value);
this.setState({
inputValue:e.target.value
})
}
addList(){
//...就是把数组进行分组,然后进行重新组合
this.setState({
list:[...this.state.list, this.state.inputValue]
})
}
dellistItem(index){
console.log(index);
let list = this.state.list.splice(index,1);
//react禁止直接setState里面操作state
this.setState({
list:list
})
}
constructor(props) {
super(props);//调用父类的函数,固定写法
this.state={
inputValue:'',
list:["买东西","去吃饭"],
text:"<h1>哈哈哈</h1>"
};
}
}
export default Service;