Question

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

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

Answer 2

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 3

您想保持知道何时专注于输入的状态。可选地，将占位符从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.

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

3 个答案: