Question

我想更新用户表单的状态，但是this.state.data仅返回上次更改的输入

class User extends Component {

    constructor(props) {
        super(props)

        this.state = {
            data: ''
        }
    }

    handleInputChange(event) {
        const target = event.target
        const value = (target.type === 'checkbox') ? target.checked : target.value
        const name = target.name;

        this.setState({ data: {
            [name]: value
        }})

        console.log(this.state.data)

    }
}

<input type="text" name="text1" value={this.state.data.text1} onChange={(event) => this.handleInputChange(event)} />
<input type="text" name="text2" value={this.state.data.text2} onChange={(event) => this.handleInputChange(event)} />

如果我可以的话

this.setState({ [name]: value })

我正在向服务发出http请求，我只想发送this.state.data而不发送整个this.state，因为大多数事情对于该服务都没有用。我只需要表格数据。谢谢

Answer 1

对象和数组的行为与原始类型（int，float，字符串）不同，它们是内存中的指针，为了更改和的值，您需要使用spread运算符创建对象的副本，然后更改值并将整个新对象传递给这样的状态：

let data = {...this.state.data} //this is the spread operator that copies the data
const target = event.target
const value = (target.type === 'checkbox') ? target.checked : target.value
const name = target.name
data[name] = value
this.setState({data: data})

应该可以工作

在处理对象和数组时，您需要小心，问题是您在内存中设置了两个不同的指向对象的指针...如果您是初学者，则很难下定决心，但要继续练习并尝试在C语言中学习指针

this.setState到子对象

1 个答案: