学习React第三天

最新推荐文章于 2024-05-23 20:03:15 发布

张先森-Gemini

最新推荐文章于 2024-05-23 20:03:15 发布

阅读量334

点赞数 8

文章标签：学习 react.js javascript

本文链接：https://blog.csdn.net/weixin_61006919/article/details/136294138

版权

import React from "react";

class App extends React.PureComponent {
  state = {
    inputValue: "",
    checkedArr: ["rap", "唱"],
  };
  handleChecked = (e) => {
    let arr = [...this.state.checkedArr];
    if (e.target.checked) {
      arr.push(e.target.value);
    } else {
      arr.splice(arr.indexOf(e.target.value), 1);
    }
    this.setState({
      checkedArr: arr,
    });
  };
  render() {
    return (
      <div className="App">
        <div>
          {/* 打印input框内容 */}
          <input
            placeholder="打印input框内容"
            onInput={(e) => {
              console.log(e.target.value);
            }}
          />
        </div>
        <div className="inp">
          <p>绑定的value:{this.state.inputValue}</p>
          {/* 给input绑定value 动态绑定 双向绑定 value */}
          <input
            value={this.state.inputValue}
            placeholder="给input绑定value"
            onInput={(e) => {
              this.setState({
                inputValue: e.target.value,
              });
            }}
          />
        </div>
        <div>
          <p>选中数组: {this.state.checkedArr}</p>
          {/* 
            checked是实现 双向绑定 数组里面有会勾选 
            使用了 indexOf 方法来检查数组 this.state.checkedArr 是否包含字符串 "唱"。如果 indexOf 返回的索引值不等于 -1，表示数组中找到了该字符串，条件表达式的结果为 true，复选框将被选中。否则，条件表达式的结果为 false，复选框将不被选中
          */}
          <input
            checked={this.state.checkedArr.indexOf("唱") !== -1}
            onChange={this.handleChecked}
            type="checkbox"
            value="唱"
            name="choose"
          />
          唱
          <input
            checked={this.state.checkedArr.indexOf("跳") !== -1}
            onChange={this.handleChecked}
            type="checkbox"
            value="跳"
            name="choose"
          />
          跳
          <input
            checked={this.state.checkedArr.indexOf("rap") !== -1}
            onChange={this.handleChecked}
            type="checkbox"
            value="rap"
            name="choose"
          />
          rap
        </div>
      </div>
    );
  }
}

export default App;