React - условное рендеринг непонятного входного значения - PullRequest
Новая
       38

React - условное рендеринг непонятного входного значения

0 голосов
/ 18 января 2020

Мой код 

class Com extends React.Component {
    constructor(props) {
        super(props);
        this.state = {is_clicked: false};
    }

    render() {
        let sub_com1 = () => {
            return (
                <div>Input1:<input/></div>
            );
        };
        let sub_com2 = () => {
            return (
                <div>Input2:<input/></div>
            );
        };
        return (
        <div>
            <div>
                {this.state.is_clicked ? sub_com1() : sub_com2()}
            </div>
            <button onClick={()=>{
                               let is_clicked=this.state.is_clicked;
                               this.setState({is_clicked: !is_clicked});
                            }}>
                Click me
            </button>
        </div>
        );
    }
}

и отображение в реальном времени: codepen .

В этом коде я использую условный рендеринг в методе рендеринга Com .

Что я ожидаю

Каждый раз, когда я нажимаю кнопку, область ввода должна очищаться, поскольку она отображается для другого компонента

То, что я встретил

Каждый раз, когда я нажимаю кнопку, метка «input1» или «input2» менялась, но область ввода не очищалась.

1 Ответ

0 голосов
/ 18 января 2020

Чтобы решить эту проблему, вы должны добавить key атрибуты к вашим элементам ввода, измените код следующим образом, и он будет работать: 

class Com extends React.Component {
    constructor(props) {
        super(props);
        this.state = {is_clicked: false};
    }

    render() {
        let sub_com1 = () => {
            return (
                <div>Input1:<input key={1} id='A' /></div>
            );
        };
        let sub_com2 = () => {
            return (
                <div>Input2:<input key={2} id='b' /></div>
            );
        };
        return (
        <div>
            <div>
                {this.state.is_clicked ? sub_com1() : sub_com2()}
            </div>
            <button onClick={()=>{
                               let is_clicked=this.state.is_clicked;
                               this.setState({is_clicked: !is_clicked});
                            }}>
                Click me
            </button>
        </div>
        );
    }
}

ReactDOM.render(
  <Com/>,
  mountNode,
);

В следующей статье это обсуждается более подробно и почему важно иметь ключевой атрибут для элементов:

полная статья: ключи-в-дочерних-компоненты-важны

Ключ не совсем о производительности это больше касается идентичности (что, в свою очередь, приводит к лучшей производительности). Случайно назначенные и изменяющиеся значения не образуют идентичности Пол О'Шаннесси

...