react(four day)

事件处理

• 使用JSX语法时你需要传入一个函数作为事件处理函数，而不是字符串
• 不能通过返回false的方法阻止默认行为

//传统html
<button onclick="activateLasers()">
  Activate Lasers
</button>
//这里使用返回false阻止a标签默认跳转
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>
//react中事件是一个函数
<button onClick={activateLasers}>
  Activate Lasers
</button>
//要使用preventDefault属性
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

一个排他思想小案例

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
        //在这里使用
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

小结：注意点，回调中使用，绑定this必不可少，class不会绑定this，所以你不做绑定他是undefined，然后这里函数setState取反，render里根据变化的值渲染，

向事件处理程序传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

• React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

条件渲染

• 提示：主要思路是写两个组件，然后在render里使用传参，在判断组件中，根据参数判断显示哪一个组件

//供选择的两个组件
function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}
//根据参数判断返回哪一个
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}
//传参并渲染
ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

与运算符妙用

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

小结：这里使用与运算符，可以达成类似vue中v-if的效果，因为两个真才会渲染，一个假则为假，直接跳过