weex-nuke/src/node_modules/nuke-base-input/docs/basic.md

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

# BaseInput 基础用法

- order: 0
- title_en: BaseInput usage

---

```js
<NukePlayGround>
  // Uncontrolled
  <BaseInput
    defaultValue="Uncontrolled value"
    style={{ width: 100, height: 300 }}
    rows={20}
    maxLength={10}
    multiple={true}
    placeholder="Enter something"
    onInput={(e) => {}}
    onFocus={(e) => {}}
  />
</NukePlayGround>
```

---

```js
/** @jsx createElement */
import { createElement, Component, findDOMNode, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import BaseInput from 'nuke-base-input';
import Button from 'nuke-button';
import Page from 'nuke-page';

let App = class Demo extends Component {
  constructor() {
    super();
    this.state = {
      content: '',
      getVal: null
    };
  }
  getvalue = (e) => {
    this.setState({
      getVal: this.refs.myinput.getValue()
    });
  };
  getRef = (e) => {
    if (findDOMNode(this.refs.myinput.getRef())) {
      console.log('find it');
    }
  };
  render() {
    return (
      <Page title="Input">
        <Page.Intro main="基础样式" />
        <View style={styles.lineWithMargin}>
          <BaseInput
            ref="myinput"
            maxLength={10}
            style={styles.input}
            onInput={(e) => {
              console.log('input', e);
            }}
            onFocus={() => {
              console.log('focus');
            }}
            defaultValue="今年流行"
            id="first"
          />
        </View>
        <Text>get Value: {this.state.getVal}</Text>
        <View x="buttons" style={styles.btns}>
          <Button block type="primary" onPress={this.getvalue}>
            获得值
          </Button>
          <Button style={styles.btn} block type="primary" onPress={this.getRef}>
            获得input
          </Button>
        </View>
        <Page.Intro main="多行" />
        <View style={styles.lineWithMargin}>
          <BaseInput
            style={[styles.input, { height: 300, marginBottom: 20 }]}
            rows={20}
            maxLength={10}
            multiple={true}
            id="third"
            placeholder="多行文本：说点什么吧"
          />
        </View>
        <Page.Intro main="自定义样式" />
        <View style={styles.lineWithMargin}>
          <BaseInput
            id="fourth"
            style={[
              styles.input,
              {
                borderWidth: 0,
                height: 40,
                backgroundColor: '#3089dc',
                color: '#ffffff'
              }
            ]}
            inputStyle={{ padding: 0 }}
          />
        </View>

        <Page.Intro main="不可修改" />
        <View style={[styles.lineWithMargin, { marginBottom: '10rem' }]}>
          <BaseInput style={styles.input} disabled id="fiveth" value="不可修改" />
        </View>
      </Page>
    );
  }
};
const styles = {
  lineWithMargin: {
    marginLeft: 30,
    marginRight: 30
  },
  textLine: {
    marginTop: 20,
    marginBottom: 40
  },
  input: {
    width: 600,
    height: 80,
    marginBottom: 20
  },
  text: {
    fontSize: 26
  }
};
render(<App />);
```