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

我想在输入组件中实现一个X图标，它将清除输入字段。如果我控制了国家，我可以很容易地做到这一点。但使用无状态组件真的可能吗？ 我使用react语义ui，它们的有状态组件具有自动控制的状态

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

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

//受控
类应用程序扩展了React.Component{
状态={
值：“”
}
onChange=（事件、道具）=>{
this.setState（{value:props.value}）；
}
onClearInput=（）=>{
this.setState（{value:'}）；
}
render（）{
返回(
)
}
}

允许组件用户通过道具设置值，并且仍然能够清除输入，这很容易实现，例如：

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

类MyInput扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:props.value | |''''}；
}
handleChange=事件=>{
const{onChange}=this.props；
this.setState（{value:event.currentTarget.value}）；
onChange&&onChange（事件）；
};
handleClear=（）=>{
const{onClearInput}=this.props；
this.setState（{value:}）；
onClearInput&&onClearInput（）；
};
render（）{
const{value}=this.state；
const{clearable，onChange，…inputProps}=this.props；
常量clearIcon=可清除的&；
返回(
);
}
}

您甚至可以使用@pkuzhel建议的hoc或渲染道具使其更具可组合性

看看它在起作用。

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

import React，{Component}来自'React'；
从“语义ui反应”导入{Input，Button}
类应用程序扩展组件{
清除=（）=>{
log（this.inputRef.target.value）；
this.inputRef.target.value=''；
}
render（）{
返回(
{input.persist（）；this.inputRef=input}}/>
清楚的
);
}
}

为什么它必须在非受控输入上工作？@trixn，为什么不？：-）我只想创建一个通用组件，而不强迫人们以任何特定的方式使用它。因此，如果你只是把

放在你的应用程序中，你将有一个带有X按钮的输入，它将立即生效。我不认为这是可能的，但也许我错过了什么。这就是我问这个问题的原因。是的，但是如果你写的组件被其他人使用，他们为什么要关心它内部使用的是受控输入还是非受控输入？我不明白这个问题。我同意@trixn。您可以使用渲染道具，这将让使用您的组件的人在他们自己的视图中使用您控制的道具，或者只控制输入。我能看到的另一种情况是，组件的用户必须将

ref

传递给他们的输入。但他们应该能够以受控/非受控的方式使用部件。问题是我无法在内部控制

值

，因为这样用户就无法设置自己的

值

。另一方面，如果我不控制

值

，我就无法清除它@pkuzhel我看不出渲染道具在这里能帮我什么忙。你能解释一下吗？这不能解决问题。此类组件的用户将无法完全控制该值。例如，尝试以可控的方式使用此组件，并将

onChange

设置为空函数。您可能希望输入在键入时保持为空，但它仍然会显示键入的字符。@Andrey不，不会。看这行

。如果从外部提供

值

道具，它将覆盖该值。它是完全可以从外部控制和清除的。我添加了一个codesandbox示例。@Andrey如果您测试它，您将看到它完全符合您的要求。您更改了初始代码，使我的注释变得无关紧要。伟大的您的代码仍然无法解决我的问题#2，因为您强制用户实现自己的

onClearInput

。我用

uncontroller

lib解决了这个问题，稍后将发布答案。@Andrey这是一个小问题，当你拒绝理解它时，我浪费了时间为你提供正确的解决方案。不允许受控输入自行清除。父级的状态在任何时候都必须是输入的值。因此，父级必须清除输入本身，否则输入将从受控切换到非受控。你所谓的“强制”实际上是用户想要的，如果他自己控制了价值。这就是为什么它被称为受控。请不要在将来问你认为你知道安全其他人时间的解决方案的问题。