计算样式反应不起作用

我有嵌套表格对象，但我尝试使用一个处理程序SETSTATE，不知何故不工作计算样式反应不起作用

constructor() { 
    super() 

    this.state = { 
     form: { 
     name: '', 
     location: '' 
     } 
    } 
    } 

    handleFormInput = (event) => { 

    this.setState({ 
     [this.state.form[event.target.name]]: event.target.value 
    }) 

    setTimeout(() => { 
     console.log(this.state.form) 
    },50) 

    }

event.target.name可以的名称和位置。

来源

2017-08-07 Jessie Anderson

能否请你澄清你的代码，因为旁边的'构造函数（）' 'handleFormInput = ...'是无效的语法，如果是'handleFormInput：事件=> ...'我说的方法检查'this'箭头函数没有自己的'this'对象，他们正在封闭周围一个。或者确切地说'handleFormInput = event => ...'定义了什么？上下文在这里很重要。 – Thomas

@Thomas为什么不呢？它反应es6。 handleFormInput是我jsx中的onChange监听器。 –

这就是我说的是上下文的一部分。所以'handleFormInput = ...'是'渲染（）' - 函数里面？通过您的片段看起来就像告诉'handleFormInput'就在你的类中定义的，旁边的'constructor'的方法。 – Thomas

您无法直接访问和setState函数内修改动态状态，你更希望得到的状态对象的副本，并对其进行修改。另外，您也许已经知道setState为async，因此您有setTimeout函数，因为setState为您提供callback函数，因此在状态发生更改时执行此函数。

handleFormInput = (event) => { 
    var form = {...this.state.form} 
    form[event.target.name] = event.target.value; 
    this.setState({ 
     form 
    },() => {this.state.form}) 

    }

来源

2017-08-07 08:50:59

哦，怪不得，提醒状态是不可改变的。谢谢！！ –

我认为此代码不能正常工作：

this.setState（{ [this.state.form [event.target.name]：event.target.value }）

替代方案是：

handleFormInput = (event) => { 
    //New code 
    let obj = {} 
    obj[this.state.form[event.target.name]] = event.target.value 

    this.setState(obj,() => { console.log(this.state.form) }) 
    }

，以查看更新state，的使用回调函数PARAM 0

来源

2017-08-07 08:39:13

的setState是异步的，你的状态将正常通话后，不知何故更新。然后渲染将被再次调用。尝试在渲染或componentWillUpdate检查你的新状态：https://facebook.github.io/react/docs/react-component.html#componentwillupdate

你不应该看在你的状态的改变而改变你的状态之后

来源

2017-08-07 09:42:21 Nevosis

计算样式反应不起作用

回答

相关问题