Question

我想在Input组件中实现一个清除输入字段的X图标。如果我控制状态，我可以很容易地做到这一点。但实际上，无状态组件是否可行？我使用react-semantic-ui，它们的有状态组件具有自动控制状态。

所以我想创建一个可以像这样使用的输入：

//Controlled
class App extends React.Component {
  state = {
    value:''
  }

  onChange = (event, props) => {
    this.setState({value: props.value});
  }

  onClearInput = () => {
    this.setState({value: ''});
  }
  
  render() {
    return (
        <MyInput
          clearable
          value={this.state.value}
          onChange={this.onChange}
          onClearInput={this.onClearInput}
        />
      )
  }
}

或者

// Uncontrolled
class App extends React.Component {
  onChange = (event, props) => {
    doSomething(props.value);
  }

  render() {
    return (
        <MyInput
          clearable
          onChange={this.onChange}
        />
      )
  }
}

在第二个示例中，clearable功能无效，因为我们无法控制该值。

MyInput可以像这样实现：

import React from 'react';
import { Input } from 'semantic-ui-react';
import ClearIcon from './ClearIcon';

function MyInput(props) {
  const prepareProps = {...props};
  if (props.clearable) {
    prepareProps.icon=<ClearIcon onClick={props.onClearInput} />;
    delete prepareProps.clearable;
  }
  delete prepareProps.onClearInput;
  return (
    <div className="my-input">
      <Input {...prepareProps} />
    </div>
  );
}
...etc.

我的问题：

clearable功能必须以受控和不受控制的方式工作。
clearable功能不应该需要处理程序。提供一个道具并处理引擎盖下X按钮的渲染和行为会很好。

我认为没有办法让这项工作成功。有什么想法吗？

Answer 1

允许组件的用户通过道具设置值并且仍然能够清除输入，例如，像这样：

class MyInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: props.value || ''};
    }

    handleChange = event => {
        const { onChange } = this.props;
        this.setState({ value: event.currentTarget.value });
        onChange && onChange(event);
    };

    handleClear = () => {
        const { onClearInput } = this.props;
        this.setState({ value: "" });
        onClearInput && onClearInput();
    };

    render() {
        const { value } = this.state;
        const { clearable, onChange, ...inputProps } = this.props;

        const clearIcon = clearable && <ClearIcon onClick={this.handleClear} />;

        return (
            <div className="my-input">
                <Input value={value} icon={clearIcon} onChange={this.handleChange} {...inputProps} />
            </div>
        );
    }
}

你甚至可以通过使用@pkuzhel提出的临时或渲染道具来使它更具组合性。

请查看this codesandbox example以查看其实际效果。

Answer 2

@Andrey

你会尝试以下代码吗？如果能解决你的问题，请告诉我。

import React, { Component } from 'react';
import { Input, Button } from 'semantic-ui-react'

class App extends Component {
  clear = () => {
    console.log(this.inputRef.target.value);
    this.inputRef.target.value = '';
  }
  render() {
    return (
      <div className="App">
        <Input placeholder='Search...' onChange={(input) => {input.persist(); this.inputRef = input}} />
        <Button onClick={this.clear}>Clear</Button>
      </div>
    );
  }
}

无状态React组件中的清除输入

2 个答案: