如何從多個輸入中獲取數據並將其放入localStorage？ 反應

Question

class Register extends Component{
    constructor(props) {
        super(props);
        this.submit = this.submit.bind(this);
    }

    submit(event) {
    let username = document.getElementById('username');
    let usernameValue = username.value;
    localStorage.setItem('username', usernameValue);
    }
    render(){
          return(
            <div className="register-block">
                <h4>Register</h4>
                <div className="register-block">
                    <InputGroup>
                        <Input id="username" placeholder="username" />
                        <Input id="password" placeholder="password" />
                        <Input id="tel" placeholder="tel number" />
                    </InputGroup>
                </div>
                <Button color="primary" onClick ={this.submit}>Register</Button>
            </div>
        )
    }
}

//此時，我只能輸入id =“ username”中的數據。 如何從其他輸入中獲取數據並將其存儲在localStorage中？ 它的教育項目

Answer 1

您可以執行以下操作：

let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
let phone = document.getElementById('tel').value;

let data = [];
data['username'] = username;
data['password '] = password;
data['phone '] = phone;

localStorage.setItem('userdata', JSON.stringify(data));

// To retrieve data try this
data = JSON.parse(localStorage.getItem('userdata'));

Answer 2

首先，在react中直接與DOM節點進行交互不是一個好主意。 其次，您可以控制所有輸入，並在提交時將數據推送到localStorage ，例如

class Register extends Component{
    constructor(props) {
        super(props);
        this.submit = this.submit.bind(this);
        this.state={
           username: '',
           password: '',
           tel: ''
        }
    }

    handleChange = (key, val) => {
      this.setState({[key]: val})
    }

    submit(event) {

      localStorage.setItem('registerData', JSON.stringify(this.state));
    }
    render(){
          return(
            <div className="register-block">
                <h4>Register</h4>
                <div className="register-block">
                    <InputGroup>
                        <Input id="username" placeholder="username" onChange={(val) => this.handleChange('username', val)} />
                        <Input id="password" placeholder="password" onChange={(val) => this.handleChange('password', val)}/>
                        <Input id="tel" placeholder="tel number" onChange={(val) => this.handleChange('tel', val)} />
                    </InputGroup>
                </div>
                <Button color="primary" onClick ={this.submit}>Register</Button>
            </div>
        )
    }
}

假設您的Input是一個自定義組件，那么您還必須研究How to pass data from child to parent component 。 還要檢查Controlled Vs UnControlled Components in React