Question

代码：

class RegistrationPage extends Component {
        constructor() {
        super();

    this.state = {
      style : {
        borderBottomColor : ""
      }
    }

    this.handleOnClick = this.handleOnClick.bind(this);
  }

  handleOnFocus() {
    this.setState({
      style : {
        borderBottomColor : "orange"
      }
    })
  }

  render() {
    return (
      <div id="reg_div">

          <h3 id="heading">Sign Up</h3>

          <form>

          <label htmlFor="userName">ENTER USERNAME</label>
          <br />
          <div className="userInputBox" style={this.state.style}>
            <input type="text" name="userName" className="inputStyle" placeholder="Enter Here" onFocus={this.handleOnFocus} />
          </div>
          <br />
          <label htmlFor="key">ENTER KEY</label>
          <br />
          <div className="userInputBox" style={this.state.style}>
            <input type="password" name="key" className="inputStyle" placeholder="Enter Here" onFocus={this.handleOnFocus} />
          </div>

          <button id="sign_up">REGISTER</button>

          </form>

          <div id="btn">
              <button id="sign_in_page">I already have an account</button>
          </div>

      </div>
    )
  }
}

问题： 我有两个输入字段，一个用于用户名，另一个用于密钥。每个都有他们特定的父div。当我专注于任何一个输入字段时，它会改变两个div的状态，而我想改变输入字段聚焦的特定div的状态。

Answer 1

好的，我已经编辑了你的代码。请尝试使用以下代码：

    import React, { Component } from 'react';
    import { render } from 'react-dom';

    class RegistrationPage extends Component {
    constructor() {
      super();
      this.state = {
        userNameStyle: '',
        keyStyle: '',
      };
    }

    handleOnFocus(inputFocussed) {
      if (inputFocussed == 'username') {
        this.setState({
          userNameStyle: 'orange',
          keyStyle: ''
      });
    } else if (inputFocussed == 'key') {
      this.setState({
          userNameStyle: '',
          keyStyle: 'orange',
      });
     }
    }
    render() {
     return (
      <div id="reg_div">
        <h3 id="heading">Sign Up</h3>

        <form>
          <label htmlFor="userName">ENTER USERNAME</label>
          <br />
          <div
            className="userNameInputBox"
            style={{ borderBottomWidth: 3,borderBottomStyle:"solid", borderBottomColor: this.state.userNameStyle }}
          >
            <input
              type="text"
              name="userName"
              className="inputStyle"
              placeholder="Enter Here"
              onFocus={() => this.handleOnFocus('username')}
            />
          </div>
          <br />
          <label htmlFor="key">ENTER KEY</label>
          <br />
          <div
            className="keyInputBox"
            style={{ borderBottomWidth: 3,borderBottomStyle:"solid",borderBottomColor:this.state.keyStyle }}
          >
            <input
              type="password"
              name="key"
              className="inputStyle"
              placeholder="Enter Here"
              onFocus={() => this.handleOnFocus('key')}
            />
          </div>

          <button id="sign_up">REGISTER</button>
        </form>

        <div id="btn">
          <button id="sign_in_page">I already have an account</button>
        </div>
      </div>
      );
     }
    }

 render(<RegistrationPage />, document.getElementById('root'));

Answer 2

我相信你在使用反应时应该有所不同，因为反应的反应不同。

你最好有一个单独的输入组件，所以它的状态可以自己处理。

我已经改变了你的代码以完成你想要的工作。

class RegistrationPage extends Component {
     constructor() {
     super();
}

render() {
    return (
       <div id="reg_div">
         <h3 id="heading">Sign Up</h3>

         <form>
            <label htmlFor="userName">ENTER USERNAME</label>
            <br />
            <InputComponent divClassName="userInputBox" type="text" name="userName" id="userName" initialBorderColor="white" focusBorderColor="orange" />
            <br />
            <label htmlFor="key">ENTER KEY</label>
            <br />
            <InputComponent divClassName="userInputBox" type="password" name="key" id="key" initialBorderColor="white" focusBorderColor="orange"/>
            <br/>
            <button id="sign_up">REGISTER</button>
         </form>
         <div id="btn">
           <button id="sign_in_page">I already have an account</button>
         </div>  
      </div>
    )
  }

}

class InputComponent extends React.Component{
    constructor(){
        super();
        this.state = {
            borderColor : "",
        }
        this.handleOnFocus = this.handleOnFocus.bind(this);
        this.handleOnBlur = this.handleOnBlur.bind(this);

}

componentDidMount(){
    this.initialBorderColor = this.props.initialBorderColor;
    this.focusBorderColor = this.props.focusBorderColor;
    this.setState({borderColor: this.props.initialBorderColor})
}

handleOnFocus() {
    this.setState({borderColor : this.focusBorderColor});
}

handleOnBlur() {
    this.setState({borderColor : this.initialBorderColor});
}

render(){

    let borderStyle = {display:'inline-block', borderBottomWidth: "3px", borderBottomStyle:"solid", borderBottomColor: this.state.borderColor}
    return(
        <div className={this.props.divClassName} style={borderStyle}>
            <input type={this.props.type} name={this.props.name} id={this.props.id} onFocus={this.handleOnFocus} onBlur={this.handleOnBlur}/>
         </div>
    )
}
}

在Reactjs中：如何更改Parent Div的bottomBorderColor？

2 个答案: