как получить заполнитель, когда я нажимаю на текстовое поле - PullRequest
Новая
       15

как получить заполнитель, когда я нажимаю на текстовое поле

0 голосов
/ 11 апреля 2019

у меня есть класс Input.js 

import React from 'react'

export const Form = props => {
const { input, label, type, meta, maxLength, pattern, autoCorrect, 
spellCheck, autoFocus, sublabel, placeholder} = props
const { touched, error } = meta
const { name, value } = input

return (
 <label>
  <input {...input}
    type={type}
    id={name}
    maxLength={maxLength}
    pattern={pattern}
    className={className}
    autoCorrect={autoCorrect}
    spellCheck={spellCheck}
    onBlur={value => input.onBlur(value.target.value.trim())}
    autoFocus={autoFocus}
    placeholder={placeholder}

  />
 </label>
)
}

Я добавил поле 

       <Field name='dob' label='Birth date'
         component={Form} type='text'
         onChange={this.clearErrors}
         placeholder="MM/DD/YY"
        />

я вижу текстовое поле, которое будет

https://i.stack.imgur.com/4lxpU.png

https://i.stack.imgur.com/eMNJ3.png

как вы можете видеть на i.stack.imgur.com/4lxpU.png, местозаполнитель и метка находятся в одном месте, что испортило их. Я просто хотел, чтобы там была метка вместо метки-заполнителя, и когда я нажимаю в тексте оба я хочу видеть как i.stack.imgur.com/eMNJ3.png.

Ответы [ 3 ]

1 голос
/ 11 мая 2019

onFocus = {(e) => {e.target.placeholder = placeholder}} // это поместит текст при нажатии на поле ввода 

     import React from 'react'

     export const Form = props => {
     const { input, label, type, meta, maxLength, pattern, autoCorrect, 
     spellCheck, autoFocus, sublabel, placeholder} = props
     const { touched, error } = meta
     const { name, value } = input


    return (
       <label>
       <input {...input}
       type={type}
       id={name}
       maxLength={maxLength}
       pattern={pattern}
       className={className}
       autoCorrect={autoCorrect}
       spellCheck={spellCheck}
       onBlur={value => input.onBlur(value.target.value.trim())}
       autoFocus={autoFocus}
       onFocus={(e) => { e.target.placeholder = placeholder }}
      />
     </label>
      )
0 голосов
/ 11 апреля 2019

Вы хотите сохранить состояние, которое знает, когда вы сфокусированы на входе. При желании меняет местозаполнитель с пропа на пустую строку.

Вот сжатый компонент с этой логикой. 

function Form({ placeholder }) {
  const [focused, setFocused] = React.useState(false);

  function handleOnFocus() {
    setFocused(true);
  }

  function handleOnBlur() {
    setFocused(false);
  }

  return (
    <input
      placeholder={focused ? placeholder : ""}
      onFocus={handleOnFocus}
      onBlur={handleOnBlur}
    />
  );
}

Вы можете увидеть, как он работает на CodePen здесь.

0 голосов
/ 11 апреля 2019 

import React from 'react'

export const Form = props => {
const { input, label, type, meta, maxLength, pattern, autoCorrect, 
spellCheck, autoFocus, sublabel, placeholder, ref} = props
const { touched, error } = meta
const { name, value } = input

return (
 <label>
  <input {...input}
    type={type}
    id={name}
    maxLength={maxLength}
    pattern={pattern}
    className={className}
    autoCorrect={autoCorrect}
    spellCheck={spellCheck}
    onBlur={value => input.onBlur(value.target.value.trim())}
    autoFocus={autoFocus}
    placeholder={placeholder}
    ref={ref}

  />
 </label>
)
}

class MainComponent extends Component { 
  state={
    value: ''
  }
  onClick = () => {
    console.log(this.refs.dob.placeholder)
  }
  onChange = (event) => {
    this.setState({
      value: event.target.value
    })
  }

  onFocus = (event) => {
    this.refs.name.placeholder = ''
  }

  render() {
    return <Field name='dob'
          label='Birth date'
          value={this.state.value}
         component={Form} type='text'
         onChange={this.clearErrors}
         placeholder="MM/DD/YY"
         ref='dob'
         onFocus={this.onFocus}
         onClick={this.onClick}
        />
  }
}
...