Question

我正在尝试根据所选选项显示新的文本输入。我能够如下所示，但无论我将新的选择选项更改为什么，输入的旧值始终存在。

实现这一目标的更好方法是什么？感谢任何建议。

class loadComponent extends React.Component {
    static propTypes = {
      ......
    };
    static defaultProps = {
     ....
    };
    constructor() {
     super();
     this.state = {
       value: ""
     };
    }
     state = {
      ...
     };

reset = (selected) => {
       this.setState({
        selectedInputName: selected.target[selected.target.selectedIndex].text,
        selectedInputId: selected.target.value
       });
};

makeTextInput = () => {
    return (
        <TextInput
            label={this.state.selectedInputName}
            placeholder={`Please enter ${this.state.selectedInputName} here!`}
            onBlur={event => this.setState({[this.state.selectedInputId]: event.target.value})}
            showClear
            value={this.state.value}
        />
    );
};
render() {
    let newInputText = '';
    if (this.state.selectedInputId !== '') {
        newInputText = this.makeTextInput();
    }
    return (
        <Select
            label="What would you like to search with?"
            options={this.props.searchOptions}
            onChange={selected => this.reset(selected)}
        />
        <div className="search margin_bottom_large">
            {newInputText}
    );

Answer 1

有更好的方法吗？

我认为在这种情况下使用controlled component设计模式是理想的。

class SomeInput extends Component {
    constructor() {
        super();

        this.state = {
            value: "" //Keep value state here
        };
    }

    render() {
        /* Doing something like the following will allow you to clear
           the input value simply by doing the following..

           this.setState({ value: '' });
        */
        return (
            <Input
                type="text"
                onChange={e => this.setState({ value: e.target.value })} // set value state to entered text
                value={this.state.value} // set value of input to value piece of state
            />
        );
    }
}

这将使您可以完全访问输入的当前值，从而允许您将其设置为任何内容或随时清除它或仅通过执行以下this.setState({ value: '' })任何事件。

Answer 2

makeTextInput函数会创建一个新对象，但从react的角度来看它是同一个组件，因为react通过查看它们{{1}来区分它们}和type。要使react重新创建元素，您必须更改其中一个值。

此代码每次呈现时都会更改key元素的type（因为NewInputText始终引用新函数）：

NewInputText

此代码每次都为reset = (selected) => { this.setState({ selectedInputName: selected.target[selected.target.selectedIndex].text, selectedInputId: selected.target.value }); }; makeTextInput = () => { return ( <TextInput label={this.state.selectedInputName} placeholder={`Please enter ${this.state.selectedInputName} here!`} onBlur={event => this.setState({[this.state.selectedInputId]: event.target.value})} showClear /> ); }; render() { let NewInputText = () => ''; if (this.state.selectedInputId !== '') { NewInputText = () => this.makeTextInput(); } return ( <Select label="What would you like to search with?" options={this.props.searchOptions} onChange={selected => this.reset(selected)} /> <div className="search margin_bottom_large"> <NewInputText /> );分配不同的密钥：

TextInput

Answer 3

不知道你的代码的其余部分可以使用，但你可以尝试：

makeTextInput = () => (
        <TextInput
          label={this.state.selectedInputName}
          placeholder={`Please enter ${this.state.selectedInputName} here!`}
          onBlur={event => this.setState({[this.state.selectedInputId]: event.target.value})}
          showClear
        />
      );

change = (event) => {
     this.setState({
       selectedInputName: event.target.value
     });
 }   

render() {
      return (
          <Select
            label="What would you like to search with?"
            options={this.props.searchOptions}
            onChange={this.change}
          />
          <div className="search margin_bottom_large">
          {this.makeTextInput()}
       );

您需要做的只是正确的setState。每次更改状态时，组件都将被重新渲染，这意味着将触发makeTextInput方法。

编辑：

顺便说一下，最好使用getter在render方法中返回组件，在这种情况下：

get textInput() { 
    return (
       <TextInput
         label={this.state.selectedInputName}
         placeholder={`Please enter ${this.state.selectedInputName} here!`}
         onBlur={event => this.setState({[this.state.selectedInputId]: event.target.value})}
         showClear
       />
    );

}

然后在render方法中，只需使用{this.textInput}

React：根据选定的选项添加/更改文本输入

3 个答案: