鍍金池/ 問答/HTML/ input輸入怎么去除倒序輸入

input輸入怎么去除倒序輸入

在表單中點擊編輯(表單中是一個table),這一行的每一列變?yōu)橐粋€input, 編輯時總是倒著輸入(如: 本意是輸入1234,但是輸入是4321),請問如何解決。

cacheOriginData = {};
    toggleEditable=(e, key) => {
        e.preventDefault();
        const newData = this.state.data_form.map(item => ({ ...item }));
        const target = this.getRowByKey(key, newData);
        if(target){
            if(!target.editable){
                this.cacheOriginData[key] = { ...target };
            }
            console.log("edit",  newData, key)        
            target.editable = !target.editable;
            this.setState({ data_form: newData });
        }
    }
    handleFieldChange(e, fieldName, key) {
        const newData = this.state.data_form.map(item => ({ ...item }));
        const target = this.getRowByKey(key, newData);
        console.log("onChange", e, newData, target, fieldName)
        if (target) {
          target[fieldName] = e.target.value;
          this.setState({ data_form: newData });
        }
      }

const clumn = [
         {
            key: 'time',
            title: '時間',
            dataIndex: 'time',
            width: 100,
            render: (text, record) => {
                if(record.editable){
                    return(
                        <Input defaultValue={text}
                        onChange={e => this.handleFieldChange(e, 'time', record.key)}
                        autoFocus
                        placeholder="時間"/>
                    );
                }
                return text;
            },
         },
         {
            title: '操作',
            dataIndex: 'action',
            width: 60,
            render: (text, record) => {
                console.log("render", !!record.editable)
                if (record.editable) {
                    return (
                        <span>
                          <a onClick={e => this.saveRow(e, record.key)}>保存</a>
                          <Divider type="vertical" />
                          <a onClick={e => this.cancel(e, record.key)}>取消</a>
                          </span>
                    );
                }
                return (
                  <span>
                    <a onClick={e => this.toggleEditable(e, record.key)}>編輯</a>
                    <Divider type="vertical" />
                    <a onClick={this.removeRow.bind(this, record.key)} style={{color:"red"}}>
                        <Icon style={{ fontSize: 16}} type="delete" />
                    </a>
                  </span>
                );
            }}]
回答
編輯回答
心夠野

你input裏設置了autoFocus,所以每次render後游標都會自動focus到input裏的最前面

2017年7月17日 20:09