如何解决React TextInput 占位符卡在特定值
我正在使用 React JS 进行社交媒体克隆。但我无法更改占位符值。
这是我的文件 search.js
中用于呈现搜索框的代码,如下所示
<div className="search_box">
<TextInput
placeholder="Search Chocolate"
autoFocus
value={value}
valueChange={this.search}
className="search"
/>
<span className="search_icon">
<FAIcon icon="search" />
</span>
</div>
如您所见,即使占位符显示巧克力,它也会呈现为Instagram
另外,可以肯定的是,我使用了 chrome 中的 react dev 工具来检查哪个渲染了这个组件,它还说 search.js
是渲染搜索组件的那个
因此,开发工具中的占位符甚至说占位符是 Search Instagram,尽管它显然是 Search Chocolate,它写在 search.js
.
我的 search.js
完整代码如下
import React,{ Component } from 'react'
import { post } from 'axios'
import MapSearch from './map-search/map-search'
import FAIcon from '../icons/font-awesome-icon'
import TextInput from '../input/text'
export default class Search extends Component {
state = {
value: '',search: {
users: [],groups: [],hashtags: [],},}
hide = () => {
this.setState({
search: {
users: [],})
}
search = async ({ target: { value } }) => {
this.setState({ value })
if (value.trim() != '') {
let { data } = await post('/api/search-instagram',{ value })
this.setState({ search: data })
} else {
this.hide()
}
}
clicked = () => {
this.setState({ value: '' })
this.hide()
}
render() {
let {
value,search: { users,groups,hashtags },} = this.state
return (
<div>
<div className="search_box">
<TextInput
placeholder="Search Chocolate"
autoFocus
value={value}
valueChange={this.search}
className="search"
/>
<span className="search_icon">
<FAIcon icon="search" />
</span>
</div>
{users.length > 0 || groups.length > 0 || hashtags.length > 0 ? (
<MapSearch
users={users}
groups={groups}
hashtags={hashtags}
clicked={this.clicked}
/>
) : null}
</div>
)
}
}
无论如何要更改占位符值?尽管占位符值不同,但我真的不知道为什么它仍然停留在该特定值上。
编辑:为 text.js
组件添加了 TextInput
的代码
import React from 'react'
import { string,func,oneOf,bool } from 'prop-types'
const TextInput = ({ type,placeholder,value,valueChange,...props }) => (
<input
type={type}
placeholder={placeholder}
spellCheck="false"
autoComplete="false"
value={value}
onChange={valueChange}
{...props}
/>
)
TextInput.defaultProps = {
type: 'text',placeholder: '',value: '',maxLength: '255',disabled: false,}
TextInput.propTypes = {
type: oneOf(['text','email','password']),placeholder: string.isRequired,value: string.isRequired,valueChange: func.isRequired,maxLength: string,disabled: bool,}
export default TextInput
解决方法
发送目标值。就像是:
valueChange={(e)=> this.search(e.target.value)}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。