在 React 中使用 onFocus/onClick 触发输入字段内的函数

Question

好的，所以我有一个输入字段，其值在组件安装时预加载 (this.state.color)，我正在尝试添加一个 handleColorPicker() 函数，onClick 或 onFocus 将下拉一个来自 https://casesandberg.github.io/react-color/ 的颜色选择器。我将在下面粘贴相关代码：

import React, { Component } from 'react';
import { ChromePicker } from 'react-color';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
       color: 'FFFFFF',
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleColorPicker = this.handleColorPicker.bind(this);
  }

  handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
  }

  handleColorPicker(){
    console.log('open');
    return( 
      <ChromePicker />
    )
  }

  render() {
    return(
      <input
        className="App-textForm"
        type="text"
        name="color"
        value={this.state.color}
        onChange={this.handleChange}
        onClick={this.handleColorPicker}
      />
    );
  }
}

作为构建，它 console.logs 'open' 每次我点击它。

关于为什么 onClick 不会触发 ChromePicker，我是否明显遗漏了什么？我试过将 onClick 更改为 onFocus，并尝试将我的输入包装在 div 和 onClick={this.handleColorPicker} 中。任何帮助将不胜感激，谢谢！

Answer 1

您正确地将 handleColorPicker 附加到运行，但不应在该函数中返回 ChromePicker。

看看这个CodeSandbox Example。

请注意我的组件 (isColorPickerOpen) 中的状态如何跟踪颜色选择器是否显示。我的点击处理程序在 true 和 false 之间切换此状态。

然后在我的 render 方法中，我只在 isColorPickerOpen 为真时渲染 ChromePicker 组件。

Answer 2

问题是您没有渲染选择器，您只是返回它然后什么都不做。

您需要做的是渲染选择器，您可以通过使用状态和 hide/show 基于用户选择的选择器来实现。例如：

state = {
  showPicker: false,
};

handleColorPicker(){
  console.log('open');
  this.setState(current => ({
    showPicker: !current.showPicker, // <-- Toggle the state
  }));
}

render() {
  const { showPicker } = this.state;

  return (
    <div>
    <input
      className="App-textForm"
      type="text"
      name="color"
      value={this.state.color}
      onChange={this.handleChange}
      onFocus={this.handleColorPicker} // <--- Open the picker on focus
      onBlur={this.handleColorPicker}  // <--- Hide it on blur? You need to define when to hide it
     />
     { showPicker && <ChromePicker /> }
   </div>
 );
}

使用 onFocus 和 onBlur 根据 showPicker.

的值，状态更改和选择器是否获取渲染器

您需要定义何时隐藏它，onBlur可能不是您想要的。

Answer 3

onClick 事件 listener 不对返回的组件做任何事情。您需要设置一个状态来有条件地呈现组件，例如

import React, { Component } from 'react';
import { ChromePicker } from 'react-color';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
       color: 'FFFFFF',
       isColorPickerOpen: false
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleColorPicker = this.handleColorPicker.bind(this);
  }

  handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
  }

  handleColorPicker(){
    console.log('open');
    this.setState({ isColorPickerOpen: true });
  }

  render() {
    return(
      <React.Fragment>
      <input
        className="App-textForm"
        type="text"
        name="color"
        value={this.state.color}
        onChange={this.handleChange}
        onClick={this.handleColorPicker}
      />
      {isColorPickerOpen?  <ChromePicker /> : null}
      </React.Fragment>
    );
  }
}

Answer 4

好的，所以你没有渲染 <ChromePicker />

试试这个

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
       color: 'FFFFFF',
       isPickerActive: false
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleColorPicker = this.handleColorPicker.bind(this);
  }

  handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
  }

  handleColorPicker(){
    this.setState({isPickerActive: true});
  }

  render() {
    return(
    <div>
      <input
        className="App-textForm"
        type="text"
        name="color"
        value={this.state.color}
        onChange={this.handleChange}
        onClick={this.handleColorPicker}
      />
      {this.state.isPickerActive && <ChromePicker />}
    <div>
    );
  }
}

但它只会打开选择器。希望对你有帮助。

Answer 5

使用 onClick 时您不会呈现 ChromePicker return。

相反，您可以有一个状态来处理 ChromePicker 渲染。每次点击或聚焦输入时，您都可以更改状态，然后组件将重新渲染。

示例：

import React, { Component } from 'react';
import { ChromePicker } from 'react-color';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
       color: 'FFFFFF',
       showChromePicker: false,
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleColorPicker = this.handleColorPicker.bind(this);
  }

  handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
  }

  handleColorPicker(){
    console.log('open');

    this.setState({
      showChromePicker: true,
    });
  }

  render() {
    const { showChromePicker } = this.state;

    return(
      <div>
        <input
        className="App-textForm"
        type="text"
        name="color"
        value={this.state.color}
        onChange={this.handleChange}
        onClick={this.handleColorPicker}
        />
        {showChromePicker ? <ChromePicker /> : null}
      </div>
    );
  }
}

在 React 中使用 onFocus/onClick 触发输入字段内的函数

Using onFocus/onClick to trigger a function within an input field in React

javascript

reactjs

onclick

onfocus