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

扫描二维码关注公众号，回复： 3347231 查看本文章

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

React曾经忽略的知识点（上）

猜你喜欢