web-dev-qa-db-ja.com

反応：負、10進数、またはゼロの値を持たない数値入力

タイプnumberの入力を考えてみましょう。この数値入力では、ユーザーが1つだけ入力できるようにしたいpositive、non-zero、整数（小数なし）数値。 minとstepを使用した簡単な実装は次のようになります。

class PositiveIntegerInput extends React.Component {
  render () {   
        return <input type='number' min='1' step='1'></input>
  }
}

ReactDOM.render(
  <PositiveIntegerInput />,
  document.getElementById('container')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<p>
  Try to input a decimal or negative number or zero:
</p>
<div id="container"></div>

上記のコードは、ユーザーが数値入力で上向き/下向きの矢印をクリックするだけの場合は問題なく機能しますが、ユーザーがキーボードの使用を開始するとすぐに、-42、3.14、0などの数字を入力しても問題はありません。

では、いくつかのonKeyDown処理を追加して、この抜け穴を禁止してみましょう。

class PositiveIntegerInput extends React.Component {
        constructor (props) {
    super(props)
    this.handleKeypress = this.handleKeypress.bind(this)
  }

  handleKeypress (e) {
    const characterCode = e.key
    if (characterCode === 'Backspace') return

    const characterNumber = Number(characterCode)
    if (characterNumber >= 0 && characterNumber <= 9) {
      if (e.currentTarget.value && e.currentTarget.value.length) {
        return
      } else if (characterNumber === 0) {
        e.preventDefault()
      }
    } else {
      e.preventDefault()
    }
  }

  render () {   
    return (
      <input type='number' onKeyDown={this.handleKeypress} min='1' step='1'></input>
    )
  }
}

ReactDOM.render(
    <PositiveIntegerInput />,
    document.getElementById('container')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<p>
  Try to input a decimal or negative number or zero:
</p>
<div id="container"></div>

これで、ほとんどすべてが期待どおりに動作するように見えます。ただし、ユーザーがテキスト入力のすべての数字を強調表示してから、0を使用してこの選択を上書きすると、0を値として入力できます。

この問題を修正するために、入力値が0であるかどうかをチェックし、そうである場合は1に変更するonBlur関数を追加しました。

class PositiveIntegerInput extends React.Component {
        constructor (props) {
        super(props)
    this.handleKeypress = this.handleKeypress.bind(this)
    this.handleBlur = this.handleBlur.bind(this)
  }
  
  handleBlur (e) {
    if (e.currentTarget.value === '0') e.currentTarget.value = '1'
  }

        handleKeypress (e) {
    const characterCode = e.key
    if (characterCode === 'Backspace') return

    const characterNumber = Number(characterCode)
    if (characterNumber >= 0 && characterNumber <= 9) {
      if (e.currentTarget.value && e.currentTarget.value.length) {
        return
      } else if (characterNumber === 0) {
        e.preventDefault()
      }
    } else {
                        e.preventDefault()
    }
  }

  render () {   
        return (
        <input
        type='number'
        onKeyDown={this.handleKeypress}
        onBlur={this.handleBlur}
        min='1'
        step='1' 
      ></input>
    )
  }
}

ReactDOM.render(
  <PositiveIntegerInput />,
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<p>
  Try to input a decimal or negative number or zero:
</p>
<div id="container"></div>

このタイプの基準で数値入力を実装するより良い方法はありますか？このすべてのオーバーヘッドを書くのはかなりおかしいようです入力がゼロ以外の正の整数のみを許可するようにするには...より良い方法が必要です。

javascripthtmlreactjsvalidationinput
8
Cumulo Nimbus

これが数値入力の仕組みです。コードを簡略化するには、 validity state を使用してみてください（ターゲットブラウザがサポートしている場合）。

onChange(e) {
    if (!e.target.validity.badInput) {
       this.setState(Number(e.target.value))
    }
}
1
Yurii

Reactブートストラップでの数値スピナーの埋め込みです。正の整数のみを受け入れ、最小値、最大値、デフォルト値を設定できます。

class NumberSpinner extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      oldVal: 0,
      value: 0,
      maxVal: 0,
      minVal: 0
    };
    this.handleIncrease = this.handleIncrease.bind(this);
    this.handleDecrease = this.handleDecrease.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleBlur = this.handleBlur.bind(this);
  }

  componentDidMount() {
    this.setState({
      value: this.props.value,
      minVal: this.props.min,
      maxVal: this.props.max
    });
  }

  handleBlur() {
    const blurVal = parseInt(this.state.value, 10);
    if (isNaN(blurVal) || blurVal > this.state.maxVal || blurVal < this.state.minVal) {
      this.setState({
        value: this.state.oldVal
      });
      this.props.changeVal(this.state.oldVal, this.props.field);
    }
  }

  handleChange(e) {
    const re = /^[0-9\b]+$/;
    if (e.target.value === '' || re.test(e.target.value)) {
      const blurVal = parseInt(this.state.value, 10);
      if (blurVal <= this.state.maxVal && blurVal >= this.state.minVal) {
        this.setState({
          value: e.target.value,
          oldVal: this.state.value
        });
        this.props.changeVal(e.target.value, this.props.field);
      } else {
        this.setState({
          value: this.state.oldVal
        });
      }
    }
  }

  handleIncrease() {
    const newVal = parseInt(this.state.value, 10) + 1;
    if (newVal <= this.state.maxVal) {
      this.setState({
        value: newVal,
        oldVal: this.state.value
      });
      this.props.changeVal(newVal, this.props.field);
    };
  }

  handleDecrease() {
    const newVal = parseInt(this.state.value, 10) - 1;
    if (newVal >= this.state.minVal) {
      this.setState({
        value: newVal,
        oldVal: this.state.value
      });
      this.props.changeVal(newVal, this.props.field);
    };
  }

  render() {
    return ( <
      ReactBootstrap.ButtonGroup size = "sm"
      aria-label = "number spinner"
      className = "number-spinner" >
      <
      ReactBootstrap.Button variant = "secondary"
      onClick = {
        this.handleDecrease
      } > - < /ReactBootstrap.Button> <
      input value = {
        this.state.value
      }
      onChange = {
        this.handleChange
      }
      onBlur = {
        this.handleBlur
      }
      /> <
      ReactBootstrap.Button variant = "secondary"
      onClick = {
        this.handleIncrease
      } > + < /ReactBootstrap.Button> < /
      ReactBootstrap.ButtonGroup >
    );
  }
}

class App extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      value1: 1,
      value2: 12
    };
    this.handleChange = this.handleChange.bind(this);

  }
 
  handleChange(value, field) {
    this.setState({ [field]: value });
  }


  render() {
    return ( 
      <div>
        <div>Accept numbers from 1 to 10 only</div>
        < NumberSpinner changeVal = {
          () => this.handleChange
        }
        value = {
          this.state.value1
        }
        min = {
          1
        }
        max = {
          10
        }
        field = 'value1'
         / >
         <br /><br />
        <div>Accept numbers from 10 to 20 only</div>
        < NumberSpinner changeVal = {
          () => this.handleChange
        }
        value = {
          this.state.value2
        }
        min = {
          10
        }
        max = {
          20
        }
        field = 'value2'
         / > 
      <br /><br />
      <div>If the number is out of range, the blur event will replace it with the last valid number</div>         
      </div>);
  }
}

ReactDOM.render( < App / > ,
  document.getElementById('root')
);
.number-spinner {
  margin: 2px;
}

.number-spinner input {
    width: 30px;
    text-align: center;
}
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" crossorigin="anonymous">

<div id="root" />
1
Hamed

これは反応の問題ではありませんが、ここで確認できるHTMLの問題 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number および私はあなたがここで見ることができるステートレスな例を作りました https://codesandbox.io/s/l5k250m87

0
Evandro Cavalcate Santos

コンポーネントの状態の値を使用して制御された入力としてそれを実行した場合、基準を満たさない場合、状態onChangeの更新を防ぐことができます。例えば.

class PositiveInput extends React.Component {
    state = {
        value: ''
    }

    onChange = e => {
        //replace non-digits with blank
        const value = e.target.value.replace(/[^\d]/,'');

        if(parseInt(value) !== 0) {
            this.setState({ value });
        }
    }

    render() {
        return (
            <input 
              type="text" 
              value={this.state.value}
              onChange={this.onChange}
            />
        );
     }
}
0
Anthony