javascript - react.js 怎么更改input的value值?
阿神
阿神 2017-04-11 11:40:29
[JavaScript讨论组]

这是我的一个使用场景。

1、在nav1 中的input列表中填写一次值,在nav2~nav5也会自动的把这个nav1的每一个input的值都给其它的nav,有点啰嗦了,也就是只在nav1中填写一次,其它nav都会自动添加。
2、如果需要更改nav1~nav5中input的value值,那么就需要改变nav1传下来的值,这里我不会做了,不管怎么做,都改变不了nav1传下来的值,这个value改变不了。

我在父组件中的constructor中定义了一个数组,用来存放nav1~nav5这5个对象:

constructor(props) {
        super(props);
        this.state = {
            params:[]
        }
    }

使用了个callback方法:

callback(param,i){
        let params = this.state.params;
        params[i] = param;
        this.setState({
            params
        });
    }

将这个callback方法放在nav1~nav5的子组件上, paramTwo={this.state.params[0]} 作为nav1的值传给nav2~nav5的子组件上:

 
 
...

在nav1子组件上,我在constructor中定义了要返回的字符串,并把这些字符串放在一个叫param的对象中:

constructor(props) {
        super(props);
        this.state = {
            param : {
                isHiddenNav:null,
                navBarColor:null,
                navBarTitleColor:null,
                navBarTitleFont:null
            }
        }
    }

然后调用父组件的callback方法,调用前,把所有的input的值都取到:

setParam(str,e){
        let value = e.target.value;
        let param = this.state.param;
        param[str] = value;
        this.props.callback(param,0);
    }

然后给每一个input onChange这个方法并bind(this,str):

在nav2~nav5的子组件上

同样定义要返回的值,唯一的区别是,在render方法中把传给nav2~nav5的nav1的值取出来,分别给每一个input的value赋值,让它们显示。

同样给每一个input onChange setParam()这个方法并bind(this,str).

现在的问题是:nav2~nav5都可以拿到nav1的值并显示,而却改不了nav1的这个值了,在调试过程中,也确实是改过了,但是重新渲染父组件的state的时候,paramTwo={this.state.params[0]}这里又把原nav1的值重新渲染了,而改过的新的value的值,则不会显示:

请问各位大侠,我该如何操作,即可以传nav1的值到nav2~nav5,又可以改变nav2~nav5的默认值?谢谢!

阿神
阿神

闭关修行中......

全部回复(1)
怪我咯

首先说下你的代码,有个问题需要说下:

callback(param,i){
        let params = this.state.params;
        params[i] = param;
        this.setState({
            params
        });
    }
setParam(str,e){
        let value = e.target.value;
        let param = this.state.param;
        param[str] = value;
        this.props.callback(param,0);
    }

这两个地方都是直接修改了 state,这是非常不推荐的做法,也就是说在你调用 setState 之前 state 已经被修改了。

然后

从你现在提供的代码来看,不能直接定位你的问题在哪,只能提供你几个点

  1. input值没正确显示,是不是没搞清楚受限input?文档在这里:https://facebook.github.io/react/docs/forms.html#controlled-components

  2. 子组件接收父组件props,然后设置成自己的state,更改了父组件的state后,你的子组件如果需要更新state得使用componentWillReceiveProps这个方法,你是否使用了?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号