Как удалить состояние TextField

Question

У меня есть текстовое поле. Если состояние пустое, но значение текстового поля отображается в текстовом поле

<TextField
                        style={{ width: '65%'}}
                        id="standard-search"
                        label="Residential Address"
                        type="text"
                        margin="dense"
                        variant="outlined"
                        name="ResidentialAddress"
                        onChange={(e)=>this.handleInputChange(e)}
                    />

Answer 1

Определите свою ценность следующим образом value={this.state.input_value}

<TextField
  style={{ width: '65%'}}
  id="standard-search"
  label="Residential Address"
  type="text"
  margin="dense"
  variant="outlined"
  name="ResidentialAddress"
  onChange={(e)=>this.handleInputChange(e)}
  value={this.state.input_value}
/>

Answer 2

Вам необходимо привязать текстовое поле value к свойству состояния. В зависимости от типа используемого вами компонента, вы можете попробовать следующие параметры:

Для компонента класса:

class YouComponentName extends Component {
  constructor (props, context) {
    super(props, context)
    this.state = {
      yourTextBoxValue: ""
    }
}

  handleInputChange (event) {
    this.setState({
      yourTextBoxValue: event.target.value;
    });
  }

render(){
    <>
        <TextField
            style={{ width: '65%'}}
            id="standard-search"
            label="Residential Address"
            type="text"
            margin="dense"
            variant="outlined"
            name="ResidentialAddress"
            onChange={(e)=>this.handleInputChange(e)}
            value = {this.state.yourTextBoxValue}
        />
    </>
}

Для компонента функции (с использованием перехватчиков React):

function YourComponentName(props) {
    const [yourTextBoxValue, setYourTextBoxValue] = useState("")

    const handleInputChange = (event) => {
        this.setState({
            setYourTextBoxValue(event.target.value);
        });
    }

    return (
        <>
            <TextField
                style={{ width: '65%'}}
                id="standard-search"
                label="Residential Address"
                type="text"
                margin="dense"
                variant="outlined"
                name="ResidentialAddress"
                onChange={handleInputChange}
                value = {yourTextBoxValue}
            />
        </>
    )
}