Question

好的，所以我有一个输入字段，其值在组件安装时预先加载（this.state.color），并且我尝试添加一个handleColorPicker（）函数onClick或onFocus将下拉a来自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＆＃39; open＆＃39;每次我点击它。

我有什么明显的遗漏，为什么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

您正在附加handleColorPicker以正确运行，但您不应该返回该功能中的ChromePicker。

看看这个CodeSandbox Example。

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

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

Answer 3

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

你需要做的是渲染选择器，你可以通过使用状态来实现，并根据用户选择隐藏/显示选择器。例如：

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 4

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

试试这个

＆＃13;

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

＆＃13;

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

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

使用onFocus / onClick在React

5 个答案: