Question

我有一个文本字段，其占位符为“ Dates From”。我想做的就是将焦点事件上的输入框类型更改为日期类型。但是

但是下面提到的解决方案不适用于JSX。

<input placeholder="Date" type="text" onFocus="(this.type='date')"  id="date">

如何使此东西在ReactJs上起作用或如何实现相同的目标？

Answer 1

使用匿名功能应该可以在e.target上使用

：

<input placeholder="Date" type="text" onFocus={(e) => e.target.type = 'date'}  id="date" />

您可以在操作here中看到它。

Answer 2

也许您可以采用基于状态的方法，在这种情况下，您可以通过执行以下操作来更新组件的状态，以在col1 col2 col3 col4 0 A 2001 2 4.55 1 A 2001 3 6 2 A 2002 4 5 3 B 2001 2 5.33 4 B 2001 3 95出现时跟踪输入字段的type：

onFocus

这样做会触发重新渲染，从而导致输入元素的类型通过以下方式切换为onFocus={ () => this.setState({ typeOfFocused : 'date' }) }：

date

这里是a working sample

Answer 3

Try this code     
handleFocus(event) {
        event.target.type = 'date'; 
      }

      render() {
        return (     
            <label>
              Name:
              <input type="text" placeholder="please Enter date"  onFocus={this.handleFocus.bind()} /> 
            </label>

        );
      }

更改JSX中的焦点输入类型不起作用

3 个答案: