Can't prevent default input in TextInput in controlled component
まだ誰も着手していません。
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
Description
The comment in #24585 suggested creating another issue for this. It's also similar to #23578.
The problem is that you can't prevent the default behavior of controlled TextInput in ReactNative.
I've asked this on StackOverflow: How to prevent adding typed keys into controlled TextInput in React-Native?. But looking at similar issues this is a bug (or missing feature) in ReactNative.
React Native Version
0.71.8
Output of npx react-native info
info Fetching system and libraries information...
System:
OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
Memory: 19.22 GB / 30.98 GB
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 20.3.0 - ~/.nvm/versions/node/v20.3.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v20.3.0/bin/yarn
npm: 9.6.7 - ~/.nvm/versions/node/v20.3.0/bin/npm
Watchman: Not Found
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 1.8.0_362 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.8 => 0.71.8
npmGlobalPackages:
react-native: Not Found
info React Native v0.72.1 is now available (your project is running on v0.71.8).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.72.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.71.8
info For more info, check out "https://reactnative.dev/docs/upgrading".
Steps to reproduce
Type the number into the input field with the code below. The code works on the Expo playground but fails on Android Emulator (didn't tested on a real device).
From the demo I expect the input to not change.
Snack, code example, screenshot, or link to a repository
const ControlledComponent = () => {
const [state, setState] = useState('0.00');
const cursor = 1;
return (
<TextInput
ref={ref}
autoFocus
onKeyPress={() => { /* empty */ }}
selection={{start: cursor, end: cursor}}
value={state}
keyboardType="numeric"
/>
);
};
event.preventDefault() also doesn't work:
const ControlledComponent = () => {
const [state, setState] = useState('0.00');
const cursor = 1;
return (
<TextInput
ref={ref}
autoFocus
onKeyPress={(e) => { e.preventDefault() }}
selection={{start: cursor, end: cursor}}
value={state}
keyboardType="numeric"
/>
);
};
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
ソースファイルやテストは指定されていません。まず、提供されている制御された TextInput の例を Android で実行し、Expo の動作と比較してください。キーが入力されたとき、または onKeyPress が preventDefault() を呼び出したときに、制御された入力が変更されなければ完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100