单击文本框时如何获取占位符

Question

我有一个classInput.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 .

Answer 1

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

Answer 2

您想保持知道何时专注于输入的状态。可选择将占位符从 prop 更改为空字符串。

这是具有该逻辑的压缩组件。

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

You can see it working on CodePen here.

Answer 3

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>
      )

单击文本框时如何获取占位符

how do i get placeholder when i click on text box

placeholder

reactjs

redux

react-redux