Question

我正在使用反应模式，该模式会弹出一个表单并要求一些用户设置。我有两个标签，其中一个用于用户详细信息，另一个用于端点详细信息。一切正常，但是当我尝试获取用户输入并将其置于一种状态时，出现错误。

首先，我尝试发送有关onChange函数的详细信息，并尝试在那里更改状态，但是随后，只要我在输入栏上输入内容，它就会跳出选项卡；然后我尝试仅使用（e.target）获取用户值，但随后出现一个错误，提示未定义e。

我已经正确初始化了所有功能，并将它们也绑定到.this。关于如何获得用户价值和更新状态的任何建议？谢谢！（由于太长且不必要，因此将代码切掉了。

   <Modal
    isOpen={this.state.showSettings}
    onRequestClose={this.closeModal}>
    <Tabs className="z-depth-1">
      <Tab title="Endpoint Settings">
        <div id="endpointSetting">
          <br />
          <h5>Please Enter Endpoint Settings</h5>
          <div>
          <form>
            <Row>
              <Col s={6}>
                <p>URI for User Details: </p>
              </Col>
              <Col s={6}>
                <input
                  id="modalInput"
                  name="user_uri"
                  placeholder="eg: localhost:3000/users"
                />
              </Col>
            </Row>
            <Row>
              <Col s={6}>
                <p>URI for Traces Details: </p>
              </Col>
              <Col s={6}>
                <input
                  id="modalInput"
                  placeholder="eg: localhost:3000/traces"
                />
              </Col>
            </Row>
            </form>
          </div>
        </div>
      </Tab>
    </Tabs>
    <button className="btn" onClick={this.closeModal}>
      Save and Close Settings
    </button>
  </Modal>

Answer 1

这里是一个示例，您可以了解Reactjs的合成事件。

import React{Component} from 'react';

class App extends Component{
      constructor(props){
               super(props);
               this.state={value:''};
               this.myFn=this.myFn.bind(this);
               }
      myFn(event){
               this.setState({value:event.target.value});
               }
      render(){
               return(<div className="App">
                      <input onChange=({this.myFn}) type="text"></input>
                      <span>{this.state.value}</span>
                      </div>)
               }
              }
      export default App;

Answer 2

因此，我发现onChange显然是在每个键击中发生的，并且由于某种原因而使选项卡混乱。我只是将onChange更改为onBlur和voila，就可以了。不知道为什么选项卡弄乱了。。也许是因为MaterializeCSS。

无法使用react modal

2 个答案: