Question

我需要帮助获取多个文本字段才能更新，但事件发生了冲突。当我更新一个字段时，它会改变或删除另一个字段。这是我现在的代码

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，它将在我键入时更新链接。与文件夹甚至主机地址相同。

提前致谢！

Answer 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

从React中的MaterialUI控制多个textField

1 个答案: