Question

我具有以下功能

import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux'
import { addTrip } from '../actions'

class NewTrip extends React.Component {
    constructor(props) {
    super(props)

    this.state = {
        location: '',
        start: '',
        end: ''
    }

  this.handleInputChange = this.handleInputChange.bind(this)
  this.handleSubmit = this.handleSubmit.bind(this)
  this.handleReset = this.handleReset.bind(this)
}

  handleInputChange(e){
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleSubmit(e) {
    e.preventDefault();
    if(this.state.location.trim() && this.state.start.trim() && 
this.state.end.trim()) {
      this.props.addTrip(this.state);
      this.handleReset();
    }

  };

  handleReset(){
    this.setState({
      location: '',
      start: '',
      end: ''
    });
  };

  render() {
    return (
      <div className="container">
        <form className="add_trip" onSubmit={ this.handleSubmit }>
          <input name="location" className="start_form" type="text" autocomplete="off" placeholder="   Location" onChange={ this.handleInputChange } value={ this.state.location }/>
      <input name="start" type="date" onChange={ this.handleInputChange } value={ this.state.start }/>
      <input name="end" type="date" onChange={ this.handleInputChange } value={ this.state.end }/>
      <input className="end_form" type="submit" value="Add" />
    </form>
  </div>
)
}
}

export default connect(null, { addTrip })(NewTrip);

我正在使用它来控制嵌套div的innerhtml值。如果内部div比外部div宽，我希望内部div将其文本设置为“错误”。另外，我想将其设置为用户定义的值。

但是该函数在意外的时间返回true。使用以下日志

const wider_than = (el1, el2) => getComputedStyle(el1).width > getComputedStyle(el2).width;

并逐字符更新display_text innerHTML字符的值，它通常在第一个字符上运行，但在第二个字符后中断。这是日志的输出

console.log(getComputedStyle(display_text).width);
console.log(getComputedStyle(display).width);
console.log(wider_than(display_text, display));
console.log(getComputedStyle(display_text).width > getComputedStyle(display).width);

谁能解释为什么会这样？

Answer 1

console.log('"b" > "a"       :', "b" > "a");//"b" comes after "a"
console.log('"bun" > "abbot" :', "bun" > "abbot");//"b" comes after "a" regardless of word length

console.log('"2" > "1"       :', "2" > "1");
console.log('"2" > "100"     :', "2" > "100");

有一个很好的理由使字符串不能像数字那样排序-假设您有一个播放列表，并且正在尝试对歌曲标题进行排序，Arctic Monkeys的“ 7” 应该放在之后”滚石乐队的第19次神经衰弱” 。

parseFloat全局函数专门用于从以它们开头的字符串中提取数字。因此，它非常适合“ 53.3958px”之类的尺寸值

const size1 = "53.3958px";
const size2 = "639px";
const size3 = "80.0625px";

console.log(`${size1} > ${size2} compared as strings:`, size1 > size2);
console.log(`${size1} > ${size2} compared as numbers:`, parseFloat(size1) > parseFloat(size2));

console.log(`${size3} > ${size2} compared as strings:`, size3 > size2);
console.log(`${size3} > ${size2} compared as numbers:`, parseFloat(size3) > parseFloat(size2));

比较getComputedStyle（）。width值的函数返回的意外真值

1 个答案: