使用onfocus/onClick在React中的输入字段中触发功能

Question

好吧，所以我有一个输入字段，该磁场的值是在组件安装时预先载荷的(this.state.color(，我正在尝试添加一个handlecolorpicker((函数onclick onclick或从https://casesandberg.github.io/reaeact-color/中删除颜色拾取器的FONFOCUS。我将粘贴以下相关代码：

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"打开"。

我是否有什么明显的，为什么onclick不会触发chromepicker？我已经尝试将OnClick更改为OnFocus，并尝试用OnClick = {this.handlecolorpicker}将我的输入包装在DIV中。任何帮助将不胜感激，谢谢！

Answer 1

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 2

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

您需要做的是渲染选择器，您可以使用状态并根据用户选择隐藏/显示Picker来做到这一点。例如：

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

您正在将handleColorPicker连接到正确运行，但您不应该返回该功能中的ChromePicker。

请查看此代码和框示例。

请注意，我的组件(isColorPickerOpen(中如何跟踪颜色拾取器是否显示的状态。我的单击处理程序在True和false之间切换此状态。

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

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。

相反，您可以有一个状态来处理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>
    );
  }
}