React学习第二天——（条件、列表渲染，表单数据绑定）

React学习第二天

1.条件绑定

根据给定的条件判断需要显示的内容

class TJ extends React.Component {
  constructor(props) {
    super(props)
    this.state = { isVip: false }
  }
  toggle = () => {
    this.setState({
      isVip: !this.state.isVip,
    })
  }
  render() {
    return (
      <div>
        {this.state.isVip ? <h2>尊贵用户</h2> : <h2>普通用户</h2>}
        <button onClick={this.toggle}>切换一下</button>
      </div>
    )
  }
}

2.列表渲染

循环显示数组中的数据。在JSX中，可以直接在标签中写好数组，会自动渲染出全部内容，也可以通过map进行渲染

class TJ extends React.Component {
  constructor(props) {
    super(props)
    this.state = { isVip: false }
  }
  toggle = () => {
    this.setState({
      isVip: !this.state.isVip,
    })
  }
  render() {
    return (
      <div>
        {this.state.isVip ? <h2>尊贵用户</h2> : <h2>普通用户</h2>}
        <button onClick={this.toggle}>切换一下</button>
      </div>
    )
  }
}
class LB extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      test: [
        {
          title: '这是第一个',
          content: '这是第一个的内容',
        },
        {
          title: '这是第二个',
          content: '这是第二个的内容',
        },
        {
          title: '这是第二个',
          content: '这是第二个的内容',
        },
      ],
    }
  }
  render() {
    let testConetent = this.state.test.map((item, i) => {
      return (
      //此处需要绑定唯一key值
        <li key={i}>
          <div>标题：{item.title}</div>
          <div>内容：{item.content}</div>
        </li>
      )
    })
    return (
      <div>
        <ul>{testConetent}</ul>
      </div>
    )
  }
}

3.表单数据绑定

在表单中，为了实现数据双向绑定，需要在state中设置好对应的值，在输入框中修改设置的值，并在下面的span中显示修改后的值

class Inp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      password: '',
    }
  }
  setUsername = (event) => {
    this.setState({
      username: event.target.value,
    })
  }
  setPassword = (event) => {
    this.setState({
      password: event.target.value,
    })
  }
  render() {
    return (
      <div>
        <label>
          <span>用户名</span>
          <input
            value={this.state.username}
            onChange={this.setUsername}
            placeholder="请输入用户名"
            type="text"
          />
        </label>
        <label>
          <span>密码</span>
          <input
            value={this.state.password}
            onChange={this.setPassword}
            placeholder="请输入密码"
            type="password"
          />
        </label>
        <div>用户名：{this.state.username}</div>
        <div>密码：{this.state.password}</div>
      </div>
    )
  }
}