В моем приложении React / NextJS у меня есть такой простой ввод:
Компоненты:
Поиск> SearchSelect> ExchangeInfo.tsx:
Search.tsx
<SearchSelect
assets={assets}
selected={selected}
exchange={exchange}
exchanges={exchanges}
fetching={fetching}
aggregate={aggregate}
checkAggregate={this.handleCheckAggregate}
enterPosition={this.handleEnterPosition}
exchangeSelect={this.handleExchangeSelect}
/>
//... the function:
@bind
handleEnterPosition(position: number) {
this.setState({ position })
}
SearchSelect
<SearchExchanges
selected={selected}
exchange={exchange}
exchanges={exchanges}
checkAggregate={checkAggregate}
aggregate={aggregate}
enterPosition={this.props.enterPosition}
exchangeSelect={this.props.exchangeSelect}
/>
ExchangeInfo
import React from 'react'
import { bind } from 'decko'
import { IAsset, IMarketAsset } from '../../shared/types'
import { EnterPositionStyle } from '../../styles'
interface IPropsInfo {
asset: IAsset
}
interface IPropsCount {
exchanges: IMarketAsset[]
}
interface IPropsPosition {
asset: IAsset
enterPosition(position: number): void
}
export const ExchangeSelectInfo = (props: IPropsInfo) =>
<h2>Exchanges with <span>{props.asset.currency}</span> denominated in BTC, ETH, USD, USDC, or USDT will be listed above. Otherwise the asset's price will be an aggregate of supported exchanges.</h2>
export const ExchangesCount = (props: IPropsCount) => {
const { exchanges } = props
const pural = exchanges.length > 1 && 's'
return (<option key={'default'}>({exchanges.length}) Exchange{pural}:</option>)
}
export class EnterPosition extends React.Component<IPropsPosition> {
render() {
const { asset } = this.props
return (
<EnterPositionStyle>
<h2>Enter your <span>{asset.currency}</span> position in order to add asset to your Portfolio. Or add the asset to your Watchlist.</h2>
<input type="number" placeholder="Enter Position" onChange={this.handleChange} />
</EnterPositionStyle>
)
}
@bind
private handleChange(event: React.FormEvent<HTMLInputElement>) {
const target = event.target as HTMLInputElement
const parsed = parseFloat(target.value)
const position = Number.isNaN(parsed) ? 0 : parsed
console.log('target.value', target.value);
this.props.enterPosition(position)
}
}
Он отлично работает в сети: https://moon.holdings (или https://dev.moon.holdings) (нажмите +, выберите актив, затем агрегируйте, затем попытайтесь войти в позицию.
Однако на мобильном устройстве это толькопозволяет мне ввести реальный номер телефона, и ввод не меняет ввод: (
ОБНОВЛЕНИЕ
Кажется, что это проблема с iPhone, мои друзья с Android могут добавлять позиции, но не мой iPhoneСтранно ....
UPDATE
Я добавил вход в корневой компонент / контейнер, и он работает ... похоже, проблема в том, что вход, который я использую, встроен3 компонента вниз. Или что-то связанное с этим.
