weex-nuke/docs/input/demo/textarea.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Input demo

* order: 3

textarea

---

```js
/** @jsx createElement */
import { View, Text, Input, Env, Button, Page } from 'weex-nuke';
import { createElement, Component, findDOMNode, render } from 'rax';
const { isWeex } = Env;
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      defaultValue:
        '券商中国提到，7月向普通投资者销售符合其风险承受能力等级的产品或服务。7-53分，为稳健型投资者，可进行中等风险投资，可购买A分',
      input: '',
      change: '',
      return: '',
      type: '',
      inputReturnKeyType: '',
      inputReturnValue: ''
    };
  }

  changeHandler = (value, e) => {
    this.setState({ change: value });
  };
  inputHandler = e => {
    this.setState({ input: e.value || e.target.value });
  };
  returnHandler = e => {
    console.log('returnHandler', e);
    this.setState({
      type: e.returnKeyType,
      return: e.value
    });
  };
  onInputReturnHandler = e => {
    this.setState({
      inputReturnKeyType: e.returnKeyType,
      inputReturnValue: e.value
    });
    console.log('in onInputReturnHandler');
  };
  render() {
    return (
      <Page title="Input">
        <Page.Intro main="return key" />
        <View style={styles.lineWithMargin}>
          <Input
            placeholder="go"
            id="sixth"
            returnKeyType="go"
            onReturn={this.onInputReturnHandler}
          />
        </View>
        <View style={[styles.lineWithMargin, styles.textLine]}>
          <Text style={styles.text}>
            return 类型： {this.state.inputReturnKeyType} , 输入框值：{' '}
            {this.state.inputReturnValue}
          </Text>
        </View>
        <Page.Intro main="多行" />
        <View style={styles.lineWithMargin}>
          <Input
            defaultValue={this.state.defaultValue}
            style={styles.textarea}
            rows={30}
            multiple={true}
            placeholder="介绍一下"
            returnKeyType="next"
            onChange={this.changeHandler}
            onInput={this.inputHandler}
            onReturn={this.returnHandler}
          />
        </View>
        <View style={styles.result}>
          <Text style={styles.resultLabel}>input:</Text>
          <Text style={styles.resultText}>{this.state.input} </Text>
        </View>
        <View style={styles.result}>
          <Text style={styles.resultLabel}>change:</Text>
          <Text style={styles.resultText}>{this.state.change} </Text>
        </View>
        <View style={styles.result}>
          <Text style={styles.resultLabel}>return:</Text>
          <Text style={styles.resultText}>{this.state.return} </Text>
        </View>
        <View style={styles.result}>
          <Text style={styles.resultLabel}>returnKeyType:</Text>
          <Text style={styles.resultText}>{this.state.type} </Text>
        </View>
        <Page.Intro main="但不监听onReturn" />
        <View style={styles.lineWithMargin}>
          <Input
            defaultValue={this.state.defaultValue}
            style={styles.textarea}
            rows={30}
            multiple
            placeholder="xxx"
            type="text"
          />
        </View>
      </Page>
    );
  }
};
const styles = {
  lineWithMargin: {
    marginLeft: '30rem',
    marginRight: '30rem'
  },
  textarea: {
    height: '200rem',
    marginBottom: '20rem',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#cccccc'
  },
  text: {
    fontSize: '26rem'
  },
  result: {
    height: '200rem',
    margin: '10rem',
    padding: '10rem'
    // backgroundColor:'#cccccc',
  },
  resultLabel: {
    color: '#999999'
  },
  resultText: {
    lines: 10,
    fontSize: '28rem',
    marginTop: '10rem'
  },
  row: {
    paddingLeft: '30rem',
    paddingRight: '30rem'
  }
};

render(<App />);
```