Javascript React.JS Typescript-OnChange说；组件正在将文本类型的受控输入更改为OnChange“中的非受控输入”；用于状态对象

你好

我是

react.js的新手，我正在尝试使用输入的
onChange
创建一个基本数据绑定。问题是，我正在使用对象的属性指定对象。不直接到物业

现在我收到了错误
警告：当我在输入中键入字符时，组件正在将文本类型的受控输入更改为不受控。

这是我的密码：

interface IProps { }

interface IFloorInfo {
    id: number
    name: string,
    type: string,
    condition: string
}

interface IFloorInfoState {
    floor: IFloorInfo
}

export default class Floors extends React.Component<IProps, IFloorInfoState> {
    state: IFloorInfoState
    constructor(props: any){
        super(props)

        this.state = {
            floor: {
                id: 0,
                name: '',
                type: '',
                condition: ''
            }
        }
    }

    ...

    render() {
        return (
            <div>
                <input type="text" value={this.state.floor.name} onChange={(e)=>this.inputChanges(e)} />
                <input type="text" value={this.state.floor.type} onChange={(e)=>this.inputChanges(e)} />
                <input type="text" value={this.state.floor.condition} onChange={(e)=>this.inputChanges(e)} />
            </div>
        )
    }

}

提前感谢您。
问题在于您的以下代码。根据此代码，您的状态将是
{floor:“input value”}

inputChanges=（e:any）=>{
this.setState（{floor:e.target.value}）；
}

但你真正想要的是

inputChanges=（e:any）=>{
//从当前状态复制楼层的所有值；
var currentFloorState={…this.state.floor}；
//从用户设置当前输入值
var name=e.target.name；
currentFloorState[name]=e.target.value；
this.setState（{floor:currentFloorState}）；
}

对于多个属性：
您可以将name属性添加到元素中，并在
changeHandler

render（）{
返回(
this.inputChanges（e）}/>
this.inputChanges（e）}/>
)
}

对于演示，您可以在该代码中引用此
，您不需要指定要绑定的属性

inputChanges = (e:any) => {
    this.setState({ floor: e.target.value });
}

你能做的就是这样

inputChanges = (e:any) => {
    this.setState({
        ...this.state,
        floor: { ... this.state.floor, [e.currentTarget.name]: e.currentTarget.value}
    })
}

基本上，您正在绑定与
this.state.floor
对象内部匹配的任何属性。
这就是您要寻找的：与我的问题不同如果我有其他属性怎么办？如
type
而非
name
？我更新了问题，添加了不同的属性，如
type
和
condition
我尝试将其用于其他属性，
currentFloorState.name=e.target.value但是属性与第一次输入的值相同。这个答案有两个问题：1
setState
执行当前状态与新状态的浅层合并，因此
…此.state
不需要存在。2.如果新状态依赖于旧状态，即在新状态中查找
this.state
，则应将回调传递给
setState
。有关更多信息，请参阅
inputChanges = (e:any) => {
    this.setState({
        ...this.state,
        floor: { ... this.state.floor, [e.currentTarget.name]: e.currentTarget.value}
    })
}