云栖问答

找不到答案?去提问题

javascript REM Render class demo index input view QAP 2017-04-17 11:37:04

TextInput设置了value的值, 却还是能修改

iPhone:10.3
WeexVersion: 0.9.5
千牛 5.9.3

'use strict';

import {createElement, Component, render} from 'rax';
import {View, Text, Modal, TextInput} from 'nuke';
import QN from 'QAP-SDK';

class Demo extends Component {
    constructor(props) {
      super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    欢迎使用千牛!
                </Text>
                <Text style={styles.instructions}>
                    编辑src/index.jsx文件,开始QAP之旅,
                </Text>
                <TextInput value="test" style={styles.input}></TextInput>
            </View>
        );
    }
}

const styles = {
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },

    input: {
        width: '500rem',
        height: '56rem',
        backgroundColor: '#fff',
    }
};

render(<Demo />);

export default Demo;

如上面代码, 即使 <TextInput value="2" style={styles.input}></TextInput>还是能修改input的值

所以如果input的onChange事件里对input绑定的state属性进行修改的话
如果前后两次state都是相同的话, input的value并不会改变,


'use strict';

import {createElement, Component, render} from 'rax';
import {View, Text, Modal, TextInput} from 'nuke';
import QN from 'QAP-SDK';

class Demo extends Component {
    constructor(props) {
      super(props);

      this.state = {
          value: 'abc',
      };
    }
    onChangeWithTextInput = () => {
        console.time('input');
        this.setState({value: 'test'});
        //this.setState({value: Math.random() > 0.5 ? '1' : '0'})这样没问题
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    欢迎使用千牛!
                </Text>
                <Text style={styles.instructions}>
                    编辑src/index.jsx文件,开始QAP之旅,
                </Text>
                <Text>{this.state.value}</Text>
                <TextInput value={this.state.value} onChange={this.onChangeWithTextInput}  style={styles.input}></TextInput>
            </View>
        );
    }
}

const styles = {
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },

    input: {
        width: '500rem',
        height: '56rem',
        backgroundColor: '#fff',
    }
};

render(<Demo />);

export default Demo;

2个回答

0

东妹

不大清楚你想表达什么,你这样写肯定是肯定改变 value 的,如果不允许用户修改的话,给 TextInput 加上 disabled 属性

0

翊晨

要想禁止修改,可以设置 disabled = {true}

1
GO