javascript - react.js 怎么更改input的value值？

问题描述

问 题

这是我的一个使用场景。

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的子组件上：

 <NavigationBarOne callback={this.callback.bind(this)} />
 <NavigationBarTwo  paramTwo={this.state.params[0]} callback={this.callback.bind(this)} />
...

在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的值，则不会显示：

<NavigationBarTwo **paramTwo={this.state.params[0]}** callback={this.callback.bind(this)} />

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

解决方案

首先说下你的代码，有个问题需要说下：

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这个方法，你是否使用了？

这篇关于javascript - react.js 怎么更改input的value值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！