React曾经忽略的知识点（上）
1.JSX 防注入攻击
你可以放心地在 JSX 当中使用用户输入
1 const title = response.potentiallyMaliciousInput; 2 // 直接使用是安全的： 3 const element = <h1>{title}</h1>;
React DOM 在渲染之前默认会过滤所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本)攻击。
2.事件处理
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。
function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={handleClick}> Click me </a> ); }
在这里，e 是一个合成事件。React 根据 W3C spec 来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。
3.事件处理的this
1 class Toggle extends React.Component { 2 constructor(props) { 3 super(props); 4 this.state = {isToggleOn: true}; 5 6 // This binding is necessary to make `this` work in the callback 7 this.handleClick = this.handleClick.bind(this); 8 } 9 10 handleClick() { 11 this.setState(prevState => ({ 12 isToggleOn: !prevState.isToggleOn 13 })); 14 } 15 16 render() { 17 return ( 18 <button onClick={this.handleClick}> 19 {this.state.isToggleOn ? 'ON' : 'OFF'} 20 </button> 21 ); 22 } 23 } 24 25 ReactDOM.render( 26 <Toggle />, 27 document.getElementById('root') 28 );
你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。
通常情况下，如果你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。
解决方法：
1.bind 绑定
1 constructor(props) { 2 super(props); 3 this.state = {isToggleOn: true}; 4 5 // This binding is necessary to make `this` work in the callback 6 this.handleClick = this.handleClick.bind(this); 7 }
2.如果你正在使用实验性的属性初始化器语法，你可以使用属性初始化器来正确的绑定回调函数：———-这个语法在 Create React App 中默认开启。
1 handleClick = () => { 2 console.log('this is:', this); 3 }
3.箭头函数
1 handleClick() { 2 console.log('this is:', this); 3 } 4 5 render() { 6 // This syntax ensures `this` is bound within handleClick 7 return ( 8 <button onClick={(e) => this.handleClick(e)}> 9 Click me 10 </button> 11 ); 12 }
4.向事件处理程序传递参数
通常我们会为事件处理程序传递额外的参数。例如，若是 id 是你要删除那一行的 id，以下两种方式都可以向事件处理程序传递参数：
1.箭头函数
参数 e 作为 React 事件对象将会被作为第二个参数进行传递。
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
2.bind绑定
通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面
preventPop(name, e){ //事件对象e要放在最后 e.preventDefault(); alert(name); } <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
5.多个输入的解决方法
当你有处理多个受控的input元素时，你可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。
class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoing: true, numberOfGuests: 2 }; this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); } render() { return ( <form> <label> Is going: <input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} /> </label> <br /> <label> Number of guests: <input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange} /> </label> </form> ); } }