web-dev-qa-db-ja.com

数字のみ。 Reactに入力番号

入力からマイナスとプラスを除外しようとしていますが、間違っています：

handleChange(event) {
  const value = event.target.value.replace(/\+|-/ig, '');
  this.setState({financialGoal: value});
}

入力コードのレンダリング：

<input style={{width: '150px'}} type="number" value={this.state.financialGoal} onChange={this.handleChange}/>
javascriptregexreactjs
24
lalala

私はあなたのコードを模倣しようとしましたが、Reactに<input type='number' />の問題があることに気付きました。回避策については、この例をチェックして、自分で試してください： https://codepen.io/zvona/pen/WjpKJX?editors=001

数字のみのパターンで通常の入力（type = 'text'）として定義する必要があります：

<input type="text" pattern="[0-9]*" onInput={this.handleChange.bind(this)} value={this.state.financialGoal} />

そして、入力の有効性を比較するには：

const financialGoal = (evt.target.validity.valid) ? evt.target.value : this.state.financialGoal;

このアプローチの最大の注意点は、モバイルの場合です->キーボードは数字ではなく、通常のアルファベット形式です。

28
zvona

  • 入力を停止するには、onKeyPressではなくonChangeを使用します。

  • onKeyPress内でevent.preventDefault()を使用することは、押すイベントを停止することを意味します。

  • keyPressハンドラーはonChangeの前にトリガーされるため、入力の現在の値（event.keyCode）ではなく、押されたキー（event.target.value）を確認する必要があります。

    onKeyPress(event) {
  const keyCode = event.keyCode || event.which;
  const keyValue = String.fromCharCode(keyCode);
  if (/\+|-/.test(keyValue))
    event.preventDefault();
}

以下のデモ????????

const {Component} = React; 

class Input extends Component {
  

  onKeyPress(event) {
   const keyCode = event.keyCode || event.which;
   const keyValue = String.fromCharCode(keyCode);
    if (/\+|-/.test(keyValue))
      event.preventDefault();
  }
  render() {
  
   return (
   <input style={{width: '150px'}} type="number" onKeyPress={this.onKeyPress.bind(this)} />

   )
  }
 
}

ReactDOM.render(<Input /> , document.querySelector('#app'));
<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>

<section id="app"></section>
15
Abdennour TOUMI

1行のコード

<input value={this.state.financialGoal} onChange={event => this.setState({financialGoal: event.target.value.replace(/\D/,'')})}/>
14
francojohnc

入力を維持する場合はtype='number'（おそらくモバイルデバイスが数値キーボードをトリガーするために）onInputの代わりにonChangeを使用してイベントの変更をキャプチャする必要があります。

onInputを使用すると、数値入力にテキストを入力すると、onChangeで割り当てた検証がバイパスされるというバグが修正されました。この関数をonInputで呼び出されるように修正すると、すべてのインスタンスでトリガーされます。

ここに私がやっていることの例があります：

<input
    type='number'
    id={`player${index}Score`}
    className='form-control'
    pattern='[0-9]{0,5}'
    onInput={(event) => this.enterScore(event, index)}
    value={this.props.scoreLabel(this.state.scores[index])}
/>

これがお役に立てば幸いです！

編集-2018年8月3日：

より良い解決策を思いつきました。 type = 'tel'を入力コンポーネント自体内でパターン正規表現と共に使用します。

私がこれをどのように配線したかのナットとボルトはここにあります：

class Input extends React.Component {
  state = {message: '3'};

  updateNumber = (e) => {
    const val = e.target.value;
    // If the current value passes the validity test then apply that to state
    if (e.target.validity.valid) this.setState({message: e.target.value});
    // If the current val is just the negation sign, or it's been provided an empty string,
    // then apply that value to state - we still have to validate this input before processing
    // it to some other component or data structure, but it frees up our input the way a user
    // would expect to interact with this component
    else if (val === '' || val === '-') this.setState({message: val});
  }

  render() {
    return (
      <input
        type='tel'
        value={this.state.message}
        onChange={this.updateNumber}
        pattern="^-?[0-9]\d*\.?\d*$"
      />
    );
  }
}

ReactDOM.render(<Input />, document.getElementById('main'));

Codepen here に取り組んでいるこの例があります

10
Jimmay

解決

今日、私はparseInt()を使用することも適切かつクリーンな方法であると感じています。 onChange(e)の例を以下に示します。

コード

onChange(e){
    this.setState({[e.target.id]: parseInt(e.target.value) ? parseInt(e.target.value) : ''})
}

説明

  1. パラメータが数値でない場合、parseInt()はNaNを返します。
  2. parseInt('12a')は12を返します。
4
Zhijian

以下のようなonChange()メソッドで入力を定義します（私の場合、childStateにはこの子コンポーネントに渡される状態が含まれます）。

<input
   ...
   value={this.props.childState.volume}
   ...
   onChange={(e) => handleChangeInteger(e, {volume: e.target.value})}
/>

私が使用したアプローチの1つは、 validatorJS （npm install validator --save）をインストールすることでした

次に、関数handleChangeIntegerを定義しました。この関数は、状態を変更するために使用されるオブジェクト、この場合は{volume: e.target.value}を受け取ります。注：入力を空白にするためにOR条件が必要でした。そうしないと、ユーザーがフィールドを空白にする場合に最後の整数をバックスペース（削除）できません。

const handleChangeInteger = (e, obj_to_return) => {
  if (validator.isInt(e.target.value) || e.target.value == '') {
    this.props.childSetState(obj_to_return)
  }
}

これで、ユーザーは、入力フィールドにバックスペース、0-9、またはe（これは数字です）以外を入力することはできなくなります。

ソリューションを作成するためにこの投稿を参照しました： https://stackoverflow.com/a/45676912/6169225

0
Marquistador

私が見つけた最も効果的でシンプルなソリューション：

<input
    type="number"
    name="phone"
    placeholder="Phone number"
    onKeyDown={e => /[\+\-\.\,]$/.test(e.key) && e.preventDefault()}
/>
0
zishe

2019年の回答は遅れていますが、誰かの助けになることを願っています

これにより、空のテキストフィールドでnullが取得されなくなります

  • テキストフィールドの値は常に0
  • バックスペースすると、0で終わります
  • 値が0で入力を開始すると、0は実際の数字に置き換えられます
// This will make sure that value never is null when textfield is empty

const minimum = 0;   

export default (props) => {
    const [count, changeCount] = useState(minimum);

    function validate(count) {
        return parseInt(count) | minimum
    }

    function handleChangeCount(count) {
        changeCount(validate(count))
    }

    return (
        <Form>
            <FormGroup>
                <TextInput
                    type="text"
                    value={validate(count)}
                    onChange={handleChangeCount}
                />
            </FormGroup>
            <ActionGroup>
                <Button type="submit">submit form</Button>
            </ActionGroup>
        </Form>
    );
};
0
Skid Kadda