小编Rat*_*aul的帖子

React 输入文本默认值和 onblur 函数使输入文本只读

伙计们,我正在研究react js

我已经创建了一个输入文本,并且在该输入按钮模糊时我正在调用一个方法并更新状态变量

但似乎如果我使用 on Blur 而不是 onChange 那么输入文本将变为只读字段

<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="0.13.3" src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script data-require="react-jsx@*" data-semver="0.13.1" src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script type="text/jsx">

      var App = React.createClass({
          getInitialState: function () {
              return {value: 'Hello!'};
          },

          changeTo: function (e) {
              this.setState({value: e.target.value});
          },

          render: function () {
              return (
                  <div>{this.state.value}
                      <input type="text" defaultValue={this.state.value || ''} 
                         value={this.state.value} onBlur={(e) => this.changeTo(e)} />
                  </div>
              );
          }
      });

      React.render(
          <App />,
          document.getElementById('app')
      );
    </script>
  </head>

  <body>
    <div id="app"></div>
  </body>

</html>
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

4
推荐指数
1
解决办法
8849
查看次数

如何将宽度 100% 应用于可滚动的表格主体

我正在尝试实现表体可滚动。我能够成功做到这一点,但现在我面临宽度 100% 的问题

请检查这个jsfiddle https://jsfiddle.net/Ratan_Paul/stpgd6x6/

<table>
<thead style="display:block;">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
 </thead>
 <tbody style="max-height: 50px;display: block;overflow-y:auto;">
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

我不能将宽度应用于 thead 和 tbody 吗?任何解决方案,以便我可以使用滚动并将宽度设置为 100%

html css

2
推荐指数
1
解决办法
7273
查看次数

如何从 chrome 扩展的存储 api 访问多个密钥

我有 2 个用于用户名和密码的输入文本框。还有一个选择列表以获取某些价值。现在我希望用户添加这些值,并且我正在尝试使用 chrome 存储 API 保存这些值。

现在,每次我将变量存储为添加了多少条记录时,如计数器。用于存储我只是这样使用

 var skillsSelect = document.getElementById("orgTypeId");
 var selectedOrgType = skillsSelect.options[skillsSelect.selectedIndex].value;
 var countTotalRecords = totalRecordsVal +1;
 var username = 'username'+countTotalRecords;
 var password = 'password'+countTotalRecords;
 var orgType = 'orgType'+countTotalRecords;

        chrome.storage.sync.set({
                            username: $("#usernameid").val(), 
                            password: $("#passwordid").val(),
                            orgType: selectedOrgType,
                            'totalRecords':countTotalRecords
                            }, function(){
            alert('Success!');
        });
Run Code Online (Sandbox Code Playgroud)

并且为了检索我正在尝试这样

var getItems = [];
    for(var i = 1; i <10; i++){
        var username  = 'username'+i;
        var password  = 'password'+i;
        var orgType  = 'orgType'+i;
        getItems.push(username);
        getItems.push(password);
        getItems.push(orgType);
    }
    console.log('==========getItems======',getItems);
    chrome.storage.sync.get(getItems, function(items){
            var keys = Object.keys(items); …
Run Code Online (Sandbox Code Playgroud)

javascript google-chrome google-chrome-extension

0
推荐指数
1
解决办法
1018
查看次数