как мне получить заполнитель при нажатии на текстовое поле

#reactjs #redux #react-redux #placeholder

#reactjs #сокращение #реагировать-redux #плейсхолдер

Вопрос:

у меня есть класс 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 .

Ответ №1:

onFocus={(e) => { e.target.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>
      )

Ответ №2:

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

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

 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 здесь.

Ответ №3:

 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}
        />
  }
}

1. Вот как получить текст-заполнитель. @Tricky spy можете ли вы хорошо объяснить, чего вы хотите достичь.

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

3. Я только что добавил несколько изменений. Добавьте прослушиватель фокуса, чтобы установить значение заполнителя в пустую строку.