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

class ClientConn extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '192.168.60.51',
            value2: '8080',
            value3: 'ContentManager',
            defaultToggled: true,
        };
    }

    handle1Change = (event) => {
        this.setState({
            value: event.target.value,
        });
    };

    handle2Change = (event) => {
        this.setState({
            value2: event.target.value2,
        });
    };

    handle3Change = (event) => {
        this.setState({
            value3: event.target.value3,
        });
    };

    render() {
        return (
            <div>
                <TextField
                    id="host-address"
                    value={this.state.value}
                    onChange={this.handle1Change}
                />
                <TextField
                    id="port"
                    value={this.state.value2}
                    onChange={this.handle2Change}
                />
                <TextField
                    id="folder"
                    value={this.state.value3}
                    onChange={this.handle3Change}
                />
            </div>      
            <div>
                 {this.state.defaultToggled ? "https://" : "http://"}{this.state.value}:{this.state.value2}/{this.state.value3}
            </div>
        </div>
     );
   }
}

Они заранее заселяют нормально. Как это

https://192.168.60.51:8080/ContentManager

Мне нужно иметь возможность обновлять каждое поле, и оно будет обновлять соответствующее значение этой ссылки на лету, прежде чем я отправлю его на сервер / базу данных. Поэтому, если я изменю порт с 8080 на 8088, он будет обновлять ссылку по мере ввода. То же самое с папкой и даже с адресом хоста.

Заранее спасибо!

1
LOTUSMS 16 Фев 2018 в 16:55

1 ответ

Лучший ответ

Не правда ли?

 handle1Change = (event) => {
        this.setState({
            value: event.target.value,
        });
    };

    handle2Change = (event) => {
        this.setState({
            value2: event.target.value,
        });
    };

    handle3Change = (event) => {
        this.setState({
            value3: event.target.value,
        });
    };

Похоже, вы по ошибке указали value2 in handle2change и value3 in handle3change

1
G_S 16 Фев 2018 в 17:15